/* ===========================================
   Drift Learn - Floating Leaf Theme (Iter 9 - Multi-Color Variants)
   Concept: Diverse Leaves (Forest, River, Autumn) drifting on a translucent Blue River.
   =========================================== */

:root {
  /* --- Water Blue Palette (Background/River) --- */
  --river-overlay: linear-gradient(135deg, rgba(8, 51, 68, 0.35), rgba(6, 182, 212, 0.45));

  /* --- Default Leaf Palette (Forest Green) --- */
  --leaf-base: rgba(14, 38, 32, 0.65);
  --leaf-border: rgba(100, 200, 150, 0.3);
  --leaf-highlight: rgba(255, 255, 255, 0.15);
  --leaf-shadow: rgba(0, 0, 0, 0.4);

  /* --- Text & Accents --- */
  --text-primary: #ecfeff;
  /* Cyan-50 (Cool white) */
  --text-secondary: #d1fae5;
  /* Green-100 (Mint) */
  --accent-glow: #34d399;
  /* Emerald/Green-400 */

  /* --- Typography (Nunito) --- */
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;

  /* --- Spacing --- */
  --space-8: 2rem;
}

/* ===========================================
   Base Reset
   =========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  /* EN: Nunito, TC: cwTeXYen (Rounded) */
  font-family: 'Nunito', 'cwTeXYen', sans-serif;
  color: #f8fafc;
  background-color: #0f172a;
  overflow-x: hidden;
  line-height: 1.6;
  min-height: 100vh;
}

/* ===========================================
   Layer 0: Video Background
   =========================================== */
.video-banner {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.video-desktop {
  display: flex;
  width: 100%;
  height: 100%;
}

.video-slot {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.video-slot:nth-child(1) {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  width: 35%;
  z-index: 3;
}

.video-slot:nth-child(2) {
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
  width: 35%;
  left: -2%;
  z-index: 2;
}

.video-slot:nth-child(3) {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  width: 35%;
  left: -4%;
  z-index: 1;
}

.video-slot video,
.video-mobile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1.0;
  filter: brightness(0.9);
}

.video-mobile {
  display: none;
  width: 100%;
  height: 100%;
}

/* ===========================================
   Layer 1: River Overlay & Wandering Rings
   =========================================== */
.river-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--river-overlay);
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.river-background::before,
.river-background::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}

.river-background::before {
  width: 120vh;
  height: 120vh;
  top: -30%;
  left: -20%;
  background: repeating-radial-gradient(circle,
      rgba(34, 211, 238, 0.15) 0,
      rgba(34, 211, 238, 0.15) 2px,
      transparent 3px,
      transparent 40px);
  animation: wander 25s infinite ease-in-out alternate;
}

.river-background::after {
  width: 100vh;
  height: 100vh;
  bottom: -20%;
  right: -20%;
  background: repeating-radial-gradient(circle,
      rgba(56, 189, 248, 0.15) 0,
      rgba(56, 189, 248, 0.15) 2px,
      transparent 3px,
      transparent 60px);
  animation: wander-reverse 30s infinite ease-in-out alternate;
}

@keyframes wander {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(20vw, 10vh) rotate(45deg);
  }

  66% {
    transform: translate(-10vw, 30vh) rotate(90deg);
  }

  100% {
    transform: translate(-5vw, -10vh) rotate(120deg);
  }
}

@keyframes wander-reverse {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(-20vw, -15vh) rotate(-30deg);
  }

  66% {
    transform: translate(-30vw, 10vh) rotate(-60deg);
  }

  100% {
    transform: translate(10vw, 5vh) rotate(-90deg);
  }
}

/* ===========================================
   Layer 2: Content (Floating Leaves)
   =========================================== */

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.2;
}

p {
  line-height: 1.6;
  opacity: 1;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* The Leaf Card (Base) */
.leaf-card {
  position: relative;
  background: var(--leaf-base);
  /* Default Forest Green */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--leaf-border);
  box-shadow:
    0 8px 32px var(--leaf-shadow),
    inset 0 0 20px rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  padding: var(--space-8);
  transition: transform 0.4s ease, box-shadow 0.4s ease;

  /* Natural Asymmetry */
  border-radius: 2rem 5rem 2rem 4rem;

  /* Ensure text is readable over video */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.leaf-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* --- Color Variants (Anti-Monotony) --- */

/* Variant 1: Forest Green (Default) */
.leaf-variant-1 {
  background: rgba(14, 38, 32, 0.65);
  border-color: rgba(100, 200, 150, 0.3);
}

/* Variant 2: Red Maple (High Contrast vs Blue) */
.leaf-variant-2 {
  background: rgba(80, 20, 20, 0.65);
  /* Deep Red */
  border-color: rgba(248, 113, 113, 0.3);
  /* Red-400 border */
}

/* Variant 3: Autumn/Olive (Warmer, Gold-ish) */
.leaf-variant-3 {
  background: rgba(40, 35, 15, 0.65);
  /* Deep Olive/Brownish */
  border-color: rgba(234, 179, 8, 0.3);
  /* Gold border */
}


/* Shape Vars */
.leaf-shape-1 {
  border-radius: 2rem 5rem 3rem 1rem;
}

.leaf-shape-2 {
  border-radius: 4rem 2rem 5rem 2rem;
}

.leaf-shape-3 {
  border-radius: 1rem 3rem 1rem 5rem;
}

/* Layout Structure */
.main-dock {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 12vh;
  position: relative;
  z-index: 10;
}

.drift-section {
  display: flex;
  align-items: center;
  gap: 4rem;
  /* Scroll Animation */
  /* opacity: 0; REMOVED to fix "Only one visible" bug */
  /* transform: translateY(50px); REMOVED */
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Keep transition for layout changes/expansion */
}

/*
.drift-section.in-view {
  opacity: 1;
  transform: translateY(0);
}
*/
/* Only use .active for Expansion, not Visibility */

.drift-section:nth-child(odd) {
  flex-direction: row;
}

.drift-section:nth-child(even) {
  flex-direction: row-reverse;
}

.leaf-content {
  flex: 1;
  /* Adjust ratio */
  z-index: 2;
  /* Ensure text is above if overlap (though usually side by side) */
}

.leaf-visual {
  flex: 1;
  /* Give it equal space or substantial space */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* Anchor for absolute child */

  /* Dynamic Height Config */
  height: 240px;
  /* Default: Small/Cropped */
  min-width: 300px;
  padding: 0 !important;
  overflow: hidden;

  transition: height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Smooth resize */
}

/* Active State: Expand Height to reveal full image (Portait/Square) */
.drift-section.active .leaf-visual {
  height: 520px;
  /* Tall enough for vertical app screenshot */
}

/* Ensure mobile override isn't conflicting */
@media (max-width: 768px) {
  .leaf-visual {
    width: 100%;
    /* On mobile, maybe less height expansion due to screen space? */
    height: 200px;
  }

  .drift-section.active .leaf-visual {
    height: 480px;
  }
}

/* Hero Section */
.hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero-title {
  font-size: 5rem;
  font-weight: 900;
  margin-bottom: 1rem;

  /* UPDATED: "All White" with Blue-Orange Glow */
  background: white;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Layered Drop Shadows: Blue Core, Orange Outer */
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 20px rgba(249, 115, 22, 0.6));
}

.hero-subtitle {
  /* Increased from 1.5rem to 2rem to compensate for cwTeXYen's smaller visual size */
  font-size: 2rem;
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
  /* Gradient Glow: Scaled down version of Title (Blue + Orange) */
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.9)) drop-shadow(0 0 12px rgba(249, 115, 22, 0.7));
}

/* App Icon Styling */
.hero-icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  /* Add breathing room */
}

.app-icon-large {
  width: 100px;
  /* Slightly larger */
  height: 100px;
  object-fit: cover;
  /* Fill the rounded shape */
  border-radius: 30px;
  /* Super rounded (30px) */
  /* Match title glow, but slightly sharper for the icon */
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6)) drop-shadow(0 0 25px rgba(249, 115, 22, 0.5));
}

/* Drifting Leaf Animation Element */
#drifting-leaf-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  /* Between video (0) and content (10) */
  /* Between video (0) and content (10) */
  pointer-events: none;
  /* Let clicks pass through empty space */
}

#drifting-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0.9;
  /* color: var(--accent-glow); Removed for Image */
  /* Emerald Green */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease-out;
  /* Smooth follow */
  top: -100px;
  /* Hidden initially, controlled by JS */
  left: 50%;

  pointer-events: auto;
  /* Enable clicking on the icon itself */
  cursor: pointer;
  /* Show it's clickable */
}

/* Click Interaction: Wiggle Animation */
@keyframes leafWiggle {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(-15deg) scale(1.1);
  }

  50% {
    transform: rotate(15deg) scale(1.1);
  }

  75% {
    transform: rotate(-10deg) scale(1.1);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

.wiggle-effect {
  /* Use !important to override the inline JS transform momentarily? 
     Actually, JS sets 'transform' inline style which overrides CSS. 
     We might need JS to handle the animation frames or use !important here carefully. 
     Or better: JS adds class, but since JS loop sets transform every frame, CSS animation might fight.
     
     Strategy: In JS loop, check if 'wiggle' class is active. If so, add wiggle rotation to the calculation.
     OR: Use a separate wrapper? 
     Let's try pure CSS !important first to see if it overrides inline style. */
  animation: leafWiggle 0.5s ease-in-out !important;
}

/* Feature Elements & Visuals */
.feature-icon-box {
  background: rgba(255, 255, 255, 0.1);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.feature-icon-box i {
  width: 32px;
  height: 32px;
  color: var(--accent-glow);
}

.tag-container {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.leaf-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  background: rgba(52, 211, 153, 0.15);
  border-radius: 50px;
  font-size: 1rem;
  color: #d1fae5;
  border: 1px solid rgba(52, 211, 153, 0.3);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.leaf-tag:hover {
  background: rgba(52, 211, 153, 0.3);
  transform: translateY(-2px);
}

.icon-inline {
  margin-right: 6px;
  width: 16px;
  height: 16px;
}

/* Expanded Visuals - Images */
.card-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border-radius: 0;
  /* Always match parent clipping now */
  box-shadow: none;
  background: rgba(255, 255, 255, 0.05);

  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 10;
}

.feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Always Cover: Fill width, match container height */
  transition: object-fit 0.8s ease;
}

/* Remove old specific active transforms since wrapper is always full size now */
.drift-section.active .card-image-wrapper {
  transform: none;
}

.drift-section.active .feature-img {
  /* No change needed, just keep covering the now-taller container */
}

.leaf-visual.leaf-card {
  /* Ensure the parent card has the shadow and color */
  /* The image will cover the bg color */
  transition: all 0.5s;
}

/* Ensure parent clips the absolute child */
.leaf-visual {
  position: relative;
  overflow: hidden !important;
  /* Ensure image doesn't spill out of leaf shape */
  padding: 0 !important;
  /* Remove padding if any */
}

.drift-section.active .feature-img {
  object-fit: cover !important;
  /* Force Cover to fill shape, NOT contain. User said "Full fill" */
  /* User said "fully fill the entire block", and "crop when small but show full when big"? */
  /* User: "圖片必須是完全與區塊一樣大小... 當放大時，要完整顯示圖片" */
  /* "完整顯示" usually means CONTAIN (show whole image). */
  /* BUT "填滿整個區塊" means COVER (no empty space). */
  /* Usually these contradict if aspect ratios differ. */
  /* Given the screenshot showed empty space, user likely hates the empty space. */
  /* Let's try COVER first as "Fill" is the primary visual request. */
  /* Wait, "完整顯示圖片" (show complete image) suggests they don't want cropping. */
  /* If I use CONTAIN, there will be empty space. */
  /* If I use COVER, edges are cropped. */
  /* Compromise: If aspect ratio roughly matches, COVER is best. */
  /* Let's stick to COVER for "Fill" but maybe centering is key. */
  object-fit: cover;
  padding: 0;
}


/* Multi-Image Stacking */
.multi-img-stack .feature-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* Removed transition here to avoid conflict with animation */
}

.multi-img-stack .feature-img:nth-of-type(1) {
  opacity: 1;
  /* Default show 1st */
  position: absolute;
}

/* Ensure images don't disappear when animation stops */
.drift-section:not(.active) .multi-img-stack .feature-img {
  transition: opacity 0.5s ease;
}

.drift-section:not(.active) .multi-img-stack .feature-img:nth-of-type(1) {
  opacity: 1 !important;
  /* Force first image visible when not active */
  z-index: 1;
}

.drift-section:not(.active) .multi-img-stack .feature-img:not(:nth-of-type(1)) {
  opacity: 0 !important;
  /* Force others hidden */
}

/* Animation on Scroll Active for Multi-Images */
/* Logic: 3 images. Cycle visible. Total cycle 4.5s (1.5s each) - Faster as requested */

@keyframes cycleImage1 {

  0%,
  28% {
    opacity: 1;
    z-index: 1;
  }

  33%,
  95% {
    opacity: 0;
    z-index: 0;
  }

  100% {
    opacity: 1;
    z-index: 1;
  }
}

@keyframes cycleImage2 {

  0%,
  28% {
    opacity: 0;
    z-index: 0;
  }

  33%,
  61% {
    opacity: 1;
    z-index: 1;
  }

  66%,
  100% {
    opacity: 0;
    z-index: 0;
  }
}

@keyframes cycleImage3 {

  0%,
  61% {
    opacity: 0;
    z-index: 0;
  }

  66%,
  95% {
    opacity: 1;
    z-index: 1;
  }

  100% {
    opacity: 0;
    z-index: 0;
  }
}

.drift-section.active .multi-img-stack .feature-img:nth-child(1) {
  animation: cycleImage1 4.5s infinite;
}

.drift-section.active .multi-img-stack .feature-img:nth-child(2) {
  animation: cycleImage2 4.5s infinite;
}

.drift-section.active .multi-img-stack .feature-img:nth-child(3) {
  animation: cycleImage3 4.5s infinite;
}


/* Scroll Active State: Removed CSS animation. Handled by JS on scroll now. */


/* Responsive */
@media (max-width: 768px) {

  /* Tighten global stack on mobile */
  .main-dock {
    gap: 5vh !important;
  }

  .drift-section {
    flex-direction: column !important;
    /* Force stack */
    padding: 2rem 1.5rem;
    gap: 2rem !important;
    min-height: auto;
    /* Let content dictate specific height, but leaf-visual has min-height */
  }

  .drift-section.reverse {
    flex-direction: column !important;
    /* Keep image on bottom or top? Usually top is better for context, but let's stick to stack */
  }

  /* Ensure visual block has space on mobile */
  .leaf-visual {
    width: 100% !important;
    min-width: unset;
    height: 240px;
    /* Default mobile height */
    min-height: 240px;
    /* Force it to exist! */
    /* Default mobile height */
    min-height: 240px;
    /* Force it to exist! */
    order: 2 !important;
    /* Visual Second (Bottom) */
    display: flex !important;
    /* Ensure it's not hidden */
    margin-bottom: 1rem;
    margin-top: 2rem;
    /* Add spacing between text and image */
  }

  /* Force Text First */
  .leaf-content {
    order: 1 !important;
    /* Text First (Top) */
  }

  /* Expansion on mobile */
  /* FORCE height change to SQUARE */
  .drift-section.active .leaf-visual {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    /* Match square images perfectly */
    min-height: auto !important;
    /* Allow it to shrink to width */
  }

  /* Prevent Cropping on Mobile Expansion */
  .drift-section.active .feature-img {
    object-fit: contain !important;
    /* Show WHOLE image, do not crop sides */
    background: transparent;
    /* Clean look if there are gaps */
  }

  .drift-section.active .card-image-wrapper {
    background: transparent;
    /* Remove wrapper tint so gaps aren't visible */
  }

  /* Adjust text padding */
  .leaf-content {
    width: 100%;
    padding: 0;
    text-align: left;
    /* Ensure text doesn't overlap if something weird happens */
  }

  .hero-title {
    font-size: 3rem;
  }
}

@media (max-width: 1024px) {
  .video-desktop {
    display: none;
  }

  .video-mobile {
    display: block;
  }

  .drift-section:nth-child(odd),
  .drift-section:nth-child(even) {
    flex-direction: column;
    text-align: left;
    gap: 2rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  /* Legacy Clean-up: Removed display:none/flex toggles that might conflict */
  /* We want .leaf-visual to ALWAYS allow flex/block */
  /* .leaf-visual { display: none; } REMOVED */
  /* .leaf-visual:has(.visual-large-icon) { ... } REMOVED/Redundant */

  .leaf-visual {
    width: 100% !important;
    min-width: unset;
    height: 240px;
    min-height: 240px;
    display: flex !important;
    margin-bottom: 1rem;
    order: -1;

    /* Ensure transition applies on mobile */
    transition: height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  .leaf-card {
    padding: 1.5rem;
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

}

.floating-element {
  animation: floatY 6s ease-in-out infinite;
}