/* =========================================================
   V12 — performance + mobile adaptation
   Loaded after styles.css. The visual direction stays the same; this file
   removes expensive compositing work and makes the hero stable on phones.
   ========================================================= */

/* ---------- Global rendering ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
button, a, .catalog__card{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
img{
  content-visibility:auto;
}

/* The animated SVG turbulence was one of the most expensive always-on layers.
   Keep a barely visible static paper grain on desktop; remove it on lite mode. */
.grain{
  animation:none !important;
  opacity:.018 !important;
  transform:none !important;
}
.perf-lite .grain{ display:none !important; }

/* Large fixed blurred orbs are visually redundant with the body's gradients.
   Keep the movement on strong desktops, but remove the live filter. */
.site-atmosphere__orb{
  filter:none !important;
  will-change:transform;
  opacity:.58;
}
.perf-lite .site-atmosphere{ display:none !important; }

/* Sections below the fold do not need to be painted on first load. */
.about,
.catalog,
.terms,
.why,
.footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 760px;
}
.catalog{ contain-intrinsic-size:auto 1500px; }

/* ---------- Header ---------- */
.nav .nav__inner,
.nav.is-hero .nav__inner,
.nav.is-solid .nav__inner,
.nav:not(.is-hero) .nav__inner{
  /* User wanted transparent glass: retain it, but with a cheaper blur. */
  backdrop-filter:blur(8px) saturate(104%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(104%) !important;
}

/* ---------- Hero video: compositor-only crossfade ---------- */
.hero-video{
  filter:none !important;
  backface-visibility:hidden;
  transform:translateZ(0) scale(1.018) !important;
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform 5.6s cubic-bezier(.2,.55,.3,1) !important;
  will-change:opacity, transform !important;
}
.hero-video.is-preparing{
  opacity:0 !important;
  transform:translateZ(0) scale(1.035) !important;
  filter:none !important;
}
.hero-video.is-active{
  opacity:1 !important;
  transform:translateZ(0) scale(1.008) !important;
  filter:none !important;
}
.hero-video.is-leaving{
  opacity:0 !important;
  transform:translateZ(0) scale(1.025) !important;
  filter:none !important;
}

/* Replace the full-screen blur/mix-blend transition with a tiny opacity pulse. */
.hero-video__transition{
  inset:0 !important;
  transform:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:rgba(247,243,231,.075) !important;
}
.hero-video__transition.is-switching{
  animation:v12-video-pulse .78s ease both !important;
}
@keyframes v12-video-pulse{
  0%,100%{ opacity:0; }
  46%{ opacity:.18; }
}

/* Keep the static cinematic toning; no animated filters are involved. */
.hero-video-shell::after{
  will-change:auto !important;
}
.hero-video__shine{
  opacity:.18 !important;
}

/* Stop decorative elements from requesting permanent compositor layers. */
.magnetic{ will-change:auto !important; }
.cursor-dot,.cursor-ring{
  left:0 !important;
  top:0 !important;
  will-change:transform, opacity;
}

/* Product glass keeps its look, at a much cheaper blur radius. */
.product-modal__backdrop{
  backdrop-filter:blur(5px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(5px) saturate(108%) !important;
}
.product-float__surface,
.product-price-card{
  backdrop-filter:blur(10px) saturate(116%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(116%) !important;
}

/* Avoid animating every placeholder photo forever. Real images still have a
   gentle hover effect on desktop, but no permanent Ken Burns repaint. */
.ph::before,
.ph img{
  animation:none !important;
}

/* ---------- Lite / low-resource mode ---------- */
.perf-lite .ambient-particles,
.perf-lite .hero__sweep,
.perf-lite .hero-video__shine,
.perf-lite .section-glow{
  display:none !important;
}
.perf-lite .hero-video__transition{
  display:none !important;
}
.perf-lite .marquee__track{
  animation-duration:48s !important;
}
.perf-lite .product-float__surface::before,
.perf-lite .product-price-card::before{
  animation:none !important;
}
.perf-lite .product-sheet__media,
.perf-lite .product-sheet__note,
.perf-lite .product-float__surface{
  animation:none !important;
}

/* ---------- Phone / tablet ---------- */
@media (max-width:900px), (pointer:coarse){
  .site-atmosphere,
  .ambient-particles,
  .hero__sweep,
  .hero-video__shine{
    display:none !important;
  }

  /* Scroll-linked vine/parallax is disabled by JS on compact devices. */
  .vine-path{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    transition:none !important;
  }
  .vine-marker{ display:none !important; }

  /* Faster, simpler reveals prevent stutters while flick-scrolling. */
  [data-reveal]{
    transition-duration:.72s !important;
    transform:translateY(16px);
  }
  .split-line > span{
    filter:none !important;
    transition-duration:.82s !important;
  }

  /* Modal becomes ordinary document flow on mobile: no costly live glass. */
  .product-modal{
    padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  }
  .product-modal__backdrop{
    background:rgba(235,235,225,.94) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .product-modal__stage{
    filter:none !important;
    transform:translateY(16px) scale(.985) !important;
    transition:opacity .34s ease, transform .42s cubic-bezier(.2,.7,.3,1) !important;
  }
  .product-modal.is-open .product-modal__stage{
    transform:none !important;
  }
  .product-sheet{
    border-radius:24px !important;
    padding:72px 12px 24px !important;
    gap:10px !important;
    box-shadow:0 16px 42px rgba(23,49,33,.10) !important;
  }
  .product-sheet__heading{
    padding:0 5px 4px !important;
  }
  .product-sheet__media-wrap{
    width:min(88vw, 410px) !important;
    margin:0 auto 4px !important;
  }
  .product-sheet__media,
  .product-sheet__note,
  .product-float__surface,
  .product-price-card::before,
  .product-float__surface::before{
    animation:none !important;
  }
  .product-float__surface,
  .product-price-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,252,.80) !important;
    box-shadow:0 8px 24px rgba(23,49,33,.07), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }
  .product-float__surface{
    padding:15px 15px !important;
  }
  .product-sheet__prices-row{
    width:100% !important;
    gap:8px !important;
  }
  .product-modal__close{
    width:46px !important;
    height:46px !important;
    top:12px !important;
    right:12px !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,252,.88) !important;
  }

  /* Catalog controls stay usable with thumbs. */
  .catalog__filters{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    padding:2px var(--pad) 10px;
    margin-bottom:34px !important;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .catalog__filters::-webkit-scrollbar{ display:none; }
  .catalog__filters button{
    flex:0 0 auto;
    min-height:44px;
    padding:9px 18px !important;
    scroll-snap-align:start;
  }
}

/* ---------- Portrait phones: keep the actual video readable ---------- */
@media (max-width:760px){
  .nav{
    padding:calc(8px + env(safe-area-inset-top)) 10px 0 !important;
  }
  .nav .nav__inner,
  .nav.is-hero .nav__inner,
  .nav.is-solid .nav__inner{
    min-height:52px !important;
    padding:7px 8px !important;
    border-radius:14px !important;
    backdrop-filter:blur(6px) saturate(102%) !important;
    -webkit-backdrop-filter:blur(6px) saturate(102%) !important;
  }
  .nav__logo{
    width:32px !important;
    height:32px !important;
  }
  .nav__brand{ gap:8px !important; }
  .nav__links{ display:none !important; }
  .nav__brand-copy strong{ font-size:13px !important; }
  .nav__scene-indicator{ gap:4px !important; }

  .hero{
    min-height:100svh !important;
    padding:
      calc(78px + env(safe-area-inset-top))
      16px
      calc(24px + env(safe-area-inset-bottom)) !important;
    align-items:center !important;
  }
  .hero-video-shell{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
  .hero-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 50% !important;
    transform:translateZ(0) !important;
    transition:opacity .72s ease !important;
  }
  .hero-video.is-preparing,
  .hero-video.is-active,
  .hero-video.is-leaving{
    transform:translateZ(0) !important;
  }
  /* Per-scene hooks are intentionally explicit, so framing can later be
     tuned independently without touching JS. */
  .hero-video--1{ object-position:50% 50% !important; }
  .hero-video--2{ object-position:50% 50% !important; }
  .hero-video--3{ object-position:50% 50% !important; }

  .hero__inner{
    width:100%;
    max-width:520px !important;
    padding:0 !important;
  }
  .hero__logo{
    width:min(220px, 58vw) !important;
    animation:none !important;
  }
  .hero__logo-wrap{
    margin-bottom:4px !important;
  }
  .hero__title{
    font-size:clamp(30px, 9.2vw, 40px) !important;
    line-height:1.08 !important;
    letter-spacing:-.018em !important;
    margin-top:10px !important;
  }
  .hero__title::before{ animation:none !important; }
  .hero__sub{
    max-width:340px !important;
    margin-top:14px !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }
  .growth{
    width:100% !important;
    max-width:390px !important;
    margin-top:26px !important;
  }
  .growth__icon{
    width:34px !important;
    height:34px !important;
  }
  .growth__icon svg{
    width:17px !important;
    height:17px !important;
    animation:none !important;
  }
  .growth__label{
    font-size:8.5px !important;
    letter-spacing:.07em !important;
  }
  .growth__line{
    min-width:5px !important;
    margin:0 4px 20px !important;
  }
  .hero__scroll{
    margin-top:24px !important;
    gap:7px !important;
    font-size:10px !important;
  }
  .hero__scroll svg{ animation:none !important; }

  .marquee{
    padding:20px 0 22px !important;
  }
  .marquee__track{
    animation-duration:46s !important;
    will-change:transform;
  }

  .about{
    padding:58px 18px !important;
    gap:28px !important;
  }
  .catalog{
    padding:48px 18px 28px !important;
  }
  .catalog__head{ margin-bottom:28px !important; }
  .catalog__grid{ gap:30px !important; }
  .catalog__card{
    padding:10px !important;
    margin:-10px !important;
  }
  .terms{
    padding:54px 18px !important;
  }
  .terms h2{ margin-bottom:32px !important; }
  .why{
    padding:12px 18px 68px !important;
  }
}

/* Small/short phones: keep all hero information inside the first viewport. */
@media (max-width:430px) and (max-height:740px){
  .hero{
    padding-top:calc(68px + env(safe-area-inset-top)) !important;
    padding-bottom:16px !important;
  }
  .hero__logo{ width:min(176px, 48vw) !important; }
  .hero__title{
    font-size:clamp(27px, 8.2vw, 34px) !important;
    margin-top:5px !important;
  }
  .hero__sub{
    font-size:12.5px !important;
    margin-top:10px !important;
    max-width:320px !important;
  }
  .growth{ margin-top:18px !important; }
  .growth__icon{ width:30px !important; height:30px !important; }
  .growth__label{ font-size:7.7px !important; }
  .growth__line{ margin-bottom:18px !important; }
  .hero__scroll{ margin-top:14px !important; }
}

@media (max-width:360px){
  .nav__brand-copy strong{ font-size:12px !important; }
  .nav__scene-indicator span{ width:6px !important; }
  .nav__scene-indicator span.is-active{ width:15px !important; }
  .hero__title{ font-size:29px !important; }
  .growth__label{ font-size:7.2px !important; }
  .product-price-card{ padding:11px 9px 10px !important; }
  .product-price-card .product-float__price{ font-size:18px !important; }
}

@media (prefers-reduced-motion:reduce){
  .site-atmosphere,
  .ambient-particles,
  .hero-video__transition,
  .hero-video__shine{ display:none !important; }
}

/* =========================================================
   V13 — single hero movie (desktop + mobile source)
   ========================================================= */
.hero-video--single{
  opacity:1 !important;
  visibility:visible !important;
  transition:none !important;
  filter:none !important;
  transform:translateZ(0) !important;
  backface-visibility:hidden;
}
.hero-video-shell:not(.has-video) .hero-video--single{
  opacity:0 !important;
}
.hero-video-shell.has-video .hero-video--single{
  opacity:1 !important;
}

/* No crossfade layer is needed anymore: the cinematic cuts/fades are baked
   into the 15-second movie itself. */
.hero-video__transition{ display:none !important; }

/* The selected mobile file is already 9:16, so the browser does minimal
   scaling/cropping work. */
@media (max-width:820px), (orientation:portrait) and (pointer:coarse){
  .hero-video--single{
    object-fit:cover !important;
    object-position:50% 50% !important;
  }
}