/* home.css - Derived from inline styles in index.html */

/* 1. 3D Floating Phone Mockup */
.hero-media {
  perspective: 1200px;
}
.phone-wrapper {
  position: relative;
  transform-style: preserve-3d;
  animation: floatApp 6s ease-in-out infinite;
  transform: rotateX(5deg) rotateY(-15deg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
@keyframes floatApp {
  0%, 100% { transform: rotateX(5deg) rotateY(-15deg) translateY(0); }
  50% { transform: rotateX(8deg) rotateY(-15deg) translateY(-20px); }
}
.phone-shadow {
  position: absolute;
  bottom: -30px;
  width: 200px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  filter: blur(15px);
  animation: shadowApp 6s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes shadowApp {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(0.85); opacity: 0.4; }
}
/* Override existing phone frame for 3D */
.phone-frame {
  transform: translateZ(30px) !important;
  transition: transform 0.3s;
}

/* Graded Readers Levels Visual */
.vis-levels { display: flex; align-items: flex-end; gap: 16px; height: 160px; transform: scale(0.9); transition: transform 0.5s; perspective: 1000px; padding-bottom: 20px;}
.bento-card:hover .vis-levels { transform: scale(1) translateY(-10px); }

.vis-level {
  width: 80px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border-light);
  border-top: 5px solid var(--accent-color);
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(20px) rotateX(20deg);
  opacity: 0.8;
  position: relative;
}

.vis-level.level-a1 { height: 100px; border-top-color: #8FD8D2; z-index: 1; }
.vis-level.level-a2 { height: 130px; border-top-color: #FFB347; z-index: 2; transition-delay: 0.05s; }
.vis-level.level-b1 { height: 160px; border-top-color: #E05D4E; z-index: 3; transition-delay: 0.1s; }

.bento-card:hover .vis-level { transform: translateY(0) rotateX(0); opacity: 1; box-shadow: 0 15px 30px rgba(0,0,0,0.12); }
.bento-card:hover .vis-level.level-a2 { transform: translateY(-5px); }
.bento-card:hover .vis-level.level-b1 { transform: translateY(-10px); }

.level-badge {
  font-size: 18px; font-weight: 800; font-family: var(--font-serif);
  color: var(--text-primary); text-align: center;
}

.level-lines { display: flex; flex-direction: column; gap: 6px; }
.level-lines .line { height: 4px; border-radius: 2px; background: rgba(0,0,0,0.1); width: 100%; transition: background 0.3s; }
.level-lines .line.short { width: 60%; }
.level-lines .line.long { width: 100%; }

.bento-card:hover .level-a1 .level-lines .line { background: rgba(143, 216, 210, 0.4); }
.bento-card:hover .level-a2 .level-lines .line { background: rgba(255, 179, 71, 0.4); }
.bento-card:hover .level-b1 .level-lines .line { background: rgba(224, 93, 78, 0.4); }

/* 2. Parallax Variable for Float Cards */
@keyframes floatCard {
  0%, 100% { transform: translateY(var(--parallax-y, 0px)) scale(1); }
  50% { transform: translateY(calc(var(--parallax-y, 0px) - 10px)) scale(1.02); }
}
.float-card:hover {
  transform: translateY(calc(var(--parallax-y, 0px) - 5px)) scale(1.05) !important;
}

/* 3. Feature Section Reveal */
.feature-reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}
.feature-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 4. 3D Tilt */
.bento-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.bento-card:hover {
  /* disable base css hover transitions so JS takes over perfectly */
  transform: none; 
  box-shadow: none;
}
.bento-content, .bento-visual {
  transform: translateZ(25px);
}

/* 5. Track Your Progress Visual */
.vis-tracking {
  display: flex; gap: 20px; align-items: center; justify-content: center;
  transform: scale(0.9); transition: transform 0.5s; perspective: 1000px;
}
.bento-card:hover .vis-tracking { transform: scale(1); }

.track-card {
  background: white; border-radius: 16px; padding: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  border: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
}

.vocab-card { transform: rotateY(10deg) translateZ(0); width: 140px; }
.cefr-card { transform: rotateY(-10deg) translateZ(0); width: 110px; align-items: center; }

.bento-card:hover .vocab-card { transform: rotateY(0) translateZ(10px) translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.bento-card:hover .cefr-card { transform: rotateY(0) translateZ(10px) translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); transition-delay: 0.1s;}

.t-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.t-value { font-size: 32px; font-weight: 800; color: var(--text-primary); font-family: var(--font-serif); line-height: 1; }

.t-graph { display: flex; gap: 6px; align-items: flex-end; height: 40px; margin-top: 4px; }
.t-bar { flex: 1; background: rgba(224, 93, 78, 0.15); border-radius: 4px; transition: height 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; overflow: hidden; }
.t-bar::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;
  background: var(--accent-gradient); transition: height 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bento-card:hover .t-bar::after { height: 100%; }
.bento-card:hover .t-bar:nth-child(1)::after { transition-delay: 0.1s; }
.bento-card:hover .t-bar:nth-child(2)::after { transition-delay: 0.2s; }
.bento-card:hover .t-bar:nth-child(3)::after { transition-delay: 0.3s; }
.bento-card:hover .t-bar:nth-child(4)::after { transition-delay: 0.4s; }
.bento-card:hover .t-bar:nth-child(5)::after { transition-delay: 0.5s; }

.cefr-ring { position: relative; width: 64px; height: 64px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.cefr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(0,0,0,0.08); stroke-width: 3; }
.ring-fill { fill: none; stroke: var(--accent-color); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bento-card:hover .ring-fill { stroke-dashoffset: 32; /* 68% */ }
.ring-text { position: absolute; font-size: 22px; font-weight: 800; font-family: var(--font-serif); color: var(--text-primary); }

@media (hover: none) and (pointer: coarse) {
  .phone-wrapper { animation: none; transform: none; }
  .phone-shadow { display: none; }
  .phone-frame { transform: none !important; }
  .bento-card { transform: none !important; }
  .bento-card:hover { transform: translateY(-8px) !important; box-shadow: var(--shadow-lg) !important; }
  .feature-reveal { opacity: 1; transform: none; transition: none !important; }
  @keyframes floatCard {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
  }
  .bento-content, .bento-visual { transform: none; }
  
  .vis-tracking { transform: scale(1) !important; }
  .track-card { transform: rotateY(0) translateZ(0) translateY(-5px) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }
  .t-bar::after { height: 100% !important; }
  .ring-fill { stroke-dashoffset: 32 !important; }

  .vis-levels { transform: scale(1) translateY(-10px) !important; }
  .vis-level { transform: translateY(0) rotateX(0) !important; opacity: 1 !important; box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important; }
  .vis-level.level-a2 { transform: translateY(-5px) !important; }
  .vis-level.level-b1 { transform: translateY(-10px) !important; }
  .level-a1 .level-lines .line { background: rgba(143, 216, 210, 0.4) !important; }
  .level-a2 .level-lines .line { background: rgba(255, 179, 71, 0.4) !important; }
  .level-b1 .level-lines .line { background: rgba(224, 93, 78, 0.4) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-wrapper { animation: none; transform: none; }
  .phone-shadow { animation: none; }
  @keyframes floatApp { 100% { transform: none; } }
  @keyframes shadowApp { 100% { transform: none; } }
  .phone-frame { transform: none !important; transition: none; }
  .feature-reveal { opacity: 1; transform: none; transition: none !important; }
  .bento-card { transform: none !important; transition: none !important; }
  .bento-card:hover { transform: translateY(-8px) !important; box-shadow: var(--shadow-lg) !important; }
  .bento-content, .bento-visual { transform: none !important; transition: none !important; }
  .vis-levels { transition: none; transform: scale(1) !important; }
  .vis-level { transition: none; transform: none !important; opacity: 1 !important; box-shadow: var(--shadow-md) !important; }
  .bento-card:hover .vis-levels { transform: scale(1) translateY(-5px) !important; }
  .track-card { transition: none; transform: none !important; }
  .bento-card:hover .track-card { transform: none !important; }
  .t-bar::after { transition: none; height: 100% !important; }
  .ring-fill { transition: none; stroke-dashoffset: 32 !important; }
}