/* ============================================================
   HOULE — Studio de films d'océan · bold / kinetic
   Stack: vanilla + GSAP/ScrollTrigger + Lenis
   New technique: horizontal-scroll pinned gallery + marquee
   Type: Anton (display, heavy) + Inter (body)
   ============================================================ */
:root{
  --ocean:#061A24; --abyss:#03121A; --foam:#EAF4F2;
  --teal:#2FB7A4; --coral:#FF6A3D;
  --soft:rgba(234,244,242,.6); --faint:rgba(234,244,242,.32); --line:rgba(234,244,242,.14);
  --display:"Anton", Impact, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.4rem,5vw,5rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--body); background:var(--ocean); color:var(--foam); font-size:16px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
::selection{ background:var(--coral); color:var(--ocean); }
a{ color:inherit; text-decoration:none; }

.hero__accent{ color:var(--coral); }
.eyebrow{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); }

/* INTRO */
.intro{ position:fixed; inset:0; z-index:200; background:var(--abyss); display:grid; place-items:center; }
.intro__bar{ width:0%; height:2px; background:var(--teal); max-width:60vw; }

/* NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.3rem var(--pad); mix-blend-mode:difference; }
.nav__brand{ font-family:var(--display); font-size:1.7rem; letter-spacing:.04em; }
.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); transition:color .18s var(--ease); }
.nav__links a:hover{ color:var(--foam); }
.nav__cta{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1.1rem; border:1px solid var(--line); border-radius:100px; }

/* HERO */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); overflow:hidden; }
.hero__horizon{ position:absolute; left:0; right:0; bottom:26%; height:1px; background:linear-gradient(90deg,transparent,var(--teal),transparent); opacity:.5; transform-origin:center; will-change:transform; }
.hero__title{ font-family:var(--display); font-size:clamp(4rem,17vw,15rem); line-height:.86; letter-spacing:.01em; text-transform:uppercase; }
.line{ display:block; overflow:hidden; }
.line > span{ display:inline-block; will-change:transform; }
.hero__meta{ display:flex; gap:3rem; margin-top:2.4rem; color:var(--soft); font-size:.86rem; letter-spacing:.04em; }

/* MARQUEE (kinetic type) */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding:1.1rem 0; background:var(--abyss); }
.marquee__row{ display:inline-flex; gap:1.6rem; white-space:nowrap; align-items:center; font-family:var(--display); font-size:clamp(1.6rem,4vw,3rem); letter-spacing:.03em; text-transform:uppercase; will-change:transform; }
.marquee__row span:nth-child(even){ color:var(--coral); }

/* HORIZONTAL GALLERY */
.gallery{ overflow:hidden; background:var(--ocean); }
.gallery__track{ display:flex; gap:2vw; padding:0 var(--pad); height:100svh; align-items:center; width:max-content; will-change:transform; }
.panel{ flex:0 0 auto; }
.gallery__intro{ width:min(86vw,40rem); display:flex; flex-direction:column; justify-content:center; gap:1.4rem; }
.gallery__intro h2{ font-family:var(--display); font-size:clamp(2.6rem,7vw,6rem); line-height:.9; text-transform:uppercase; }
.gallery__hint{ color:var(--teal); letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; }
.film{ position:relative; width:min(76vw,30rem); height:72vh; border-radius:16px; overflow:hidden; display:flex; align-items:flex-end; background:linear-gradient(150deg,var(--g1),var(--g2)); border:1px solid var(--line); }
.film::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 18%, rgba(234,244,242,.14), transparent 55%); }
.film__n{ position:absolute; top:1.4rem; left:1.6rem; font-family:var(--display); font-size:1.6rem; color:var(--foam); opacity:.85; }
.film__b{ position:relative; padding:2rem; }
.film__b h3{ font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; text-transform:uppercase; margin-bottom:.7rem; }
.film__b p{ color:var(--soft); font-size:.95rem; max-width:24rem; }

/* STATEMENT */
.statement{ padding:clamp(7rem,18vh,14rem) var(--pad); max-width:64rem; margin:0 auto; }
.statement__line{ font-family:var(--display); font-size:clamp(1.9rem,5vw,3.8rem); line-height:1.12; text-transform:uppercase; letter-spacing:.005em; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* INVITE */
.invite{ text-align:center; padding:clamp(7rem,16vh,13rem) var(--pad); display:flex; flex-direction:column; align-items:center; gap:2.4rem; }
.invite__title{ font-family:var(--display); font-size:clamp(3rem,11vw,9rem); line-height:.86; text-transform:uppercase; }
.invite__btn{ display:inline-flex; padding:1.1rem 2.2rem; border-radius:100px; background:var(--coral); color:var(--ocean); font-weight:700; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; transition:transform .18s var(--ease); }
.invite__btn:hover{ transform:translateY(-3px); }

/* FOOTER */
.foot{ border-top:1px solid var(--line); padding:3rem var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.foot__brand{ font-family:var(--display); font-size:clamp(3rem,13vw,9rem); line-height:.8; }
.foot__cols{ display:flex; flex-direction:column; gap:.3rem; text-align:right; color:var(--faint); font-size:.84rem; }

@media (max-width:820px){
  .nav__links{ display:none; }
  .film{ width:82vw; height:64vh; }
}
@media (prefers-reduced-motion:reduce){ .marquee__row{ animation-play-state:running !important; } }