/* ============================================================
   Motion layer: Lenis smooth scroll + animated hero, with the
   reels playing in a strip section below the hero.
   Animation is transform/opacity only (compositor-friendly).
   ============================================================ */

/* Lenis recommended base styles */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------------- Hero ---------------- */
/* Height tracks the artwork's 2.33:1 frame so `cover` crops as little as possible. */
.hero2{position:relative;display:flex;align-items:center;min-height:clamp(600px,47vw,790px);padding:56px 0;background:#0a0a0a;color:#fff;overflow:hidden}
.hero2-bgwrap{position:absolute;inset:0;will-change:transform}
/* Scrim is left-weighted: it protects the copy and leaves the phone mockups clear. */
.hero2-bg{position:absolute;inset:-5% 0 0;background-image:linear-gradient(90deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.88) 24%,rgba(8,8,8,.55) 40%,rgba(8,8,8,.15) 57%,rgba(8,8,8,0) 74%),linear-gradient(180deg,rgba(8,8,8,.4) 0%,rgba(8,8,8,0) 24%,rgba(8,8,8,0) 70%,#0a0a0a 100%),url("images/hero-scene.webp");background-size:cover,cover,cover;background-position:center,center,62% center;background-repeat:no-repeat;transform:scale(1.07);transform-origin:center 45%}
.js .hero2-bg{transition:transform 2.4s cubic-bezier(.16,1,.3,1)}
.hero2.in .hero2-bg{transform:scale(1)}
.hero2-wrap{position:relative;z-index:2;width:min(100% - 64px,1440px)}
/* 480px clears the artwork's reservations card at desktop widths and still fits
   the widest copy element (the two CTAs side by side, 472px). */
.hero2-copy{max-width:480px;will-change:transform,opacity}
/* Runs wider than the copy column on purpose — it sits above the artwork's cards,
   so there's no vertical conflict, and it reads best on one line. */
.hero2-callout{margin:0 0 22px;color:var(--cream);font-size:clamp(24px,1.9vw,34px);display:inline-block;white-space:nowrap;transform:rotate(-1.2deg)}
.hero2-headline{margin:0 0 22px;color:#fff;font-size:min(6.2vw,104px);line-height:.9;letter-spacing:.005em}
.hl-line{display:block}
.hl-inner{display:block;padding:.03em 0}
.hl-accent{color:#D53D22}
.hero2-sub{color:rgba(255,255,255,.84);font-size:clamp(18px,1.55vw,24px);max-width:415px;margin:0}
.hero2 .hero-actions{margin:32px 0 0}
.hero2 .btn-outline{border-color:rgba(255,255,255,.85);color:#fff;background:rgba(255,255,255,.06)}
.hero2 .btn-outline:hover{border-color:var(--lime);color:var(--lime)}

/* Entrance choreography (only when JS is available) */
.js .hero2 .hl-line{overflow:hidden}
.js .hero2 .hl-inner{transform:translateY(116%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.js .hero2.in .hl-inner{transform:translateY(0)}
.js .hero2 .hl-line:nth-child(1) .hl-inner{transition-delay:.12s}
.js .hero2 .hl-line:nth-child(2) .hl-inner{transition-delay:.21s}
.js .hero2 .hl-line:nth-child(3) .hl-inner{transition-delay:.3s}
.js .hero2 .hl-line:nth-child(4) .hl-inner{transition-delay:.39s}
.js .hero2 .hfade{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .95s cubic-bezier(.16,1,.3,1)}
.js .hero2.in .hfade{opacity:1;transform:translateY(0)}
.js .hero2 .hero2-callout{transform:rotate(-1.2deg) translateY(28px)}
.js .hero2.in .hero2-callout{transform:rotate(-1.2deg) translateY(0)}
.js .hero2 .hfade.hero2-callout{transition-delay:.05s}
.js .hero2 .hfade.hero2-sub{transition-delay:.6s}
.js .hero2 .hfade.hero-actions{transition-delay:.72s}
.js .hero2 .hfade.hero2-altcta{transition-delay:.82s}

/* ---------------- Reels strip (section below the hero) ---------------- */
/* Terracotta with a dim bar interior behind it — the phones are dark, and a
   flat cream field left them floating in empty space. */
.reels-strip{position:relative;background:var(--terracotta);color:var(--cream);padding:64px 0 72px;overflow:hidden}
.reels-strip:before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.72)),url("images/hero-bg-bar.webp");background-size:cover;background-position:center;opacity:.26;pointer-events:none}
.reels-strip > *{position:relative;z-index:1}
.reels-head{text-align:center;max-width:900px;margin:0 auto 38px}
.reels-head h2{color:var(--cream);font-size:clamp(34px,4vw,60px);margin:0}
.reels-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
/* Track holds four identical card sets; -25% (one set width) loops seamlessly
   and keeps 3 set-widths of runway ahead at all times, so wide/ultrawide
   viewports never outrun the duplicated content before the loop point. */
.reels-track{display:flex;width:max-content;padding:22px 0 14px;will-change:transform;animation:reelMarquee 46s linear infinite}
.reels-track:hover{animation-play-state:paused}
@keyframes reelMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
.reel-card{margin:0 22px 0 0;flex:0 0 auto;width:clamp(230px,20vw,300px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.2,1,.2,1),border-color .3s ease,box-shadow .3s ease}
.reel-card video{width:100%;height:100%;object-fit:cover;display:block}
.reel-card:nth-child(odd){transform:rotate(-1.6deg) translateY(10px)}
.reel-card:nth-child(even){transform:rotate(1.4deg) translateY(-8px)}
.reel-card:hover{transform:rotate(0deg) translateY(-6px) scale(1.045);border-color:rgba(213,61,34,.55);box-shadow:0 20px 46px rgba(0,0,0,.22),0 0 0 1.5px rgba(213,61,34,.4);z-index:2}

/* ---------------- Responsive ---------------- */
/* Below 1180 the frame is too narrow for copy and artwork side by side (cover
   would eat ~150px of the right-hand card), so the hero stacks and the artwork
   is shown whole underneath. */
@media(max-width:1180px){
  .hero2{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding:52px 0 0}
  .hero2-wrap{order:1;width:min(100% - 40px,1440px)}
  .hero2-copy{max-width:100%}
  .hero2-headline{font-size:min(8vw,88px)}
  .hero2-bgwrap{order:2;position:relative;inset:auto;width:100%;aspect-ratio:1916/821;margin-top:32px;transform:none!important}
  .hero2-bg{inset:0;background-image:url("images/hero-scene.webp");background-size:contain;background-position:center bottom;transform:none}
  .js .hero2-bg{transition:none}
}
@media(max-width:760px){
  .hero2{padding:44px 0 0}
  .hero2-wrap{width:min(100% - 28px,1440px)}
  .hero2-bgwrap{aspect-ratio:1030/776;margin-top:24px}
  .hero2-bg{background-image:url("images/hero-scene-mobile.webp")}
  .hero2-headline{font-size:min(13.5vw,72px);line-height:.94}
  .hero2-callout{font-size:21px;margin-bottom:16px;white-space:normal}
  .hero2-sub{font-size:17px}
  .hero2 .hero-actions{display:grid;gap:10px;margin-top:24px}
  .hero2 .btn{width:100%;min-height:56px;font-size:17px}
  .reels-strip{padding:44px 0 52px}
  .reels-head{margin-bottom:24px}
  .reels-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .reels-viewport::-webkit-scrollbar{display:none}
  .reels-track{animation:none;padding:14px 0}
  .reel-card{width:62vw;margin-right:14px;scroll-snap-align:center}
  .reel-card:nth-child(odd),.reel-card:nth-child(even){transform:none}
  .reel-card:hover{transform:scale(1.02)}
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .js .hero2 .hl-inner,.js .hero2 .hfade{opacity:1!important;transform:none!important}
  .hero2-bg{transform:none!important}
  .hero2-copy,.hero2-bgwrap{transform:none!important}
  .reels-track{animation:none!important;transform:none!important}
  .reels-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .reel-card:nth-child(odd),.reel-card:nth-child(even){transform:none}
}