/* Black Pearl Poker Run - page styles.
   Extracted verbatim from the sandbox reference build; only url()
   targets are repointed at the theme's assets/img/ directory. Mask
   urls stay DIRECT declarations (never through var()) so they resolve
   against this stylesheet in every engine. */

/* =========================================================================
   THE BLACK PEARL POKER RUN — one-page site, wireframe v3 build.
   Every value resolves to brand/tokens.css. Chapters snap; motion is
   scroll-driven with IO fallbacks; reduced-motion serves composed frames.
   HERO VIDEO CONTRACT: drop silent loops at assets/hero_loop.mp4 (+ .webm,
   optional) — the <video> below picks them up on next deploy; until then
   the poster carries the hero. See CONTEXT.md "hero video".
   ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (min-height:700px){ html{scroll-snap-type:y proximity} }
body{background:var(--surface-0);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--text-accent)}
::selection{background:var(--bp-gold);color:var(--bp-navy-deep)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
html{scrollbar-color:var(--bp-gold) var(--bp-navy-deep)}
::-webkit-scrollbar{width:10px;background:var(--bp-navy-deep)}
::-webkit-scrollbar-thumb{background:var(--gold-amber)}

.chapter{min-height:100vh;scroll-snap-align:start;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-8) var(--sp-gutter);overflow:hidden}
.inner{max-width:var(--max-page);margin:0 auto;width:100%;position:relative;z-index:2}

/* labels & display */
.lead-in{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.05rem,.9rem + .7vw,1.5rem);color:var(--text-accent)}
.tracked{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--tr-tagline);
  text-transform:uppercase;color:var(--text-label)}
h2.display{font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(2rem,1.2rem + 3.6vw,4.2rem);color:var(--text-primary);
  letter-spacing:var(--tr-display);line-height:var(--lh-tight)}
.prose{color:var(--text-secondary);font-size:var(--fs-lead);line-height:var(--lh-relaxed);
  max-width:56ch}

/* ---------- section grounds — the navy ladder gives each chapter its own field ---------- */
#stakes{background-image:var(--texture-dust),var(--glow-hero);
  background-size:var(--texture-dust-size),100% 100%}
#run .stage{background-color:var(--surface-1);
  background-image:var(--texture-dust);background-size:var(--texture-dust-size)}
#invite{background-image:var(--texture-dust),var(--glow-hero);
  background-size:var(--texture-dust-size),100% 100%}

/* ---------- separator — a hairline of leaf drawn out from the mark ---------- */
.sep{display:flex;align-items:center;gap:var(--sp-5);max-width:560px;
  margin:0 auto;padding:var(--sp-7) var(--sp-gutter)}
.sep i{flex:1;height:var(--rule-gold)}
.sep i:first-child{background:linear-gradient(90deg,transparent,var(--gold-amber) 55%,var(--gold-core));
  transform-origin:right center}
.sep i:last-child{background:linear-gradient(270deg,transparent,var(--gold-amber) 55%,var(--gold-core));
  transform-origin:left center}
.sep .sboat{width:58px;flex:0 0 auto;
  -webkit-mask-image:url(../img/logo_boat_mask_web.png);
  mask-image:url(../img/logo_boat_mask_web.png)}
.js .sep i{transform:scaleX(0);transition:transform var(--dur-reveal) var(--ease-out)}
.js .sep .sboat{opacity:0;transition:opacity var(--dur-reveal) var(--ease-out) .25s}
.js .sep.in i{transform:scaleX(1)}
.js .sep.in .sboat{opacity:1}

/* CTA — the one action */
.cta{display:inline-block;padding:var(--sp-4) var(--sp-7);text-decoration:none;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--tr-tagline);
  text-transform:uppercase;color:var(--bp-navy-deep);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,0,0,.55)}
.cta:active{transform:translateY(0)}

/* ---------- sticky chrome ---------- */
#chrome{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;gap:var(--sp-5);
  padding:0 var(--sp-gutter);height:56px;
  background:color-mix(in srgb,var(--bp-navy-deep) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:var(--hairline) solid var(--border-gold);
  transform:translateY(-100%);transition:transform var(--dur-base) var(--ease-out)}
#chrome.on{transform:translateY(0)}
#chrome .cmark{width:44px;flex:0 0 auto;
  -webkit-mask-image:url(../img/logo_boat_mask_web.png);
  mask-image:url(../img/logo_boat_mask_web.png)}
#chrome .cname{font-family:var(--font-display);color:var(--text-primary);
  font-size:.95rem;letter-spacing:.12em;white-space:nowrap}
#chrome .count{margin-left:auto;display:flex;gap:var(--sp-4);
  font-variant-numeric:tabular-nums}
#chrome .count b{font-family:var(--font-display);font-size:1.05rem;
  color:var(--gold-light);font-weight:var(--fw-regular)}
#chrome .count span{font-size:var(--fs-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-muted);display:block;text-align:center}
#chrome .cta{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-micro)}
@media (max-width:720px){#chrome .cname,#chrome .count{display:none}
  #chrome .cta{margin-left:auto}}

/* ---------- 1 · arrival ---------- */
#arrival{padding:0}
#arrival .media{position:absolute;inset:0}
#arrival .media video,#arrival .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
#arrival .media img{animation:kenburns 18s var(--ease-out) forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
#arrival .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,21,50,.42) 0%,rgba(6,21,50,.30) 40%,rgba(10,31,68,.86) 82%,var(--bp-navy-deep) 100%)}
#arrival .inner{display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:flex-end;min-height:100vh;padding-bottom:clamp(56px,10vh,120px);gap:var(--sp-4)}
#arrival .mark{width:min(300px,52vw);
  -webkit-mask-image:url(../img/logo_boat_mask_web.png);
  mask-image:url(../img/logo_boat_mask_web.png);
  background-position:62% 68%,62% 68%}
#arrival h1{font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(2.6rem,1.4rem + 6vw,5.4rem);color:var(--text-primary);
  letter-spacing:var(--tr-hero);line-height:var(--lh-tight)}
#arrival .when{color:var(--text-primary);font-size:var(--fs-lead)}
#arrival .when small{display:block;color:var(--text-secondary);font-size:var(--fs-sm);
  margin-top:var(--sp-2)}
#arrival .cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  color:var(--text-secondary);font-size:var(--fs-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;opacity:0;animation:cue 1.2s var(--ease-out) 5s forwards;z-index:2}
@keyframes cue{to{opacity:.85}}
.js #arrival .cue::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;
  background:linear-gradient(180deg,var(--bp-gold),transparent);
  animation:cuedrop 2.2s var(--ease-in-out) infinite}
@keyframes cuedrop{0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- 2 · stakes ---------- */
#stakes .inner{text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-5)}
#stakes .money{font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(4rem,2rem + 11vw,10.5rem);line-height:1;
  font-variant-numeric:tabular-nums}
#stakes .facts{display:flex;gap:clamp(20px,6vw,84px);margin-top:var(--sp-3)}
#stakes .facts div b{display:block;font-family:var(--font-display);
  font-size:clamp(1.6rem,1rem + 2.4vw,2.8rem);color:var(--text-primary);
  font-weight:var(--fw-regular)}
#stakes .facts div span{font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-label);font-weight:var(--fw-semibold)}

/* ---------- 3 · the run (pinned) ---------- */
#run{min-height:250vh;padding:0;scroll-snap-align:none}
#run .stage{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:var(--sp-8) var(--sp-gutter);overflow:hidden}
#run .head{text-align:center;margin-bottom:var(--sp-5)}
#run svg{display:block;width:min(880px,92%);margin:0 auto;overflow:visible}
#run .coast{fill:none;stroke:rgba(143,163,200,.38);stroke-width:2}
#run .course{fill:none;stroke:var(--gold-core);stroke-width:2.5;
  stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(223,179,91,.45))}
#run .port{fill:var(--gold-sheen)}
#run .placename{font-family:var(--font-sans);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;fill:var(--text-muted)}
#run .hand{display:flex;justify-content:center;gap:clamp(6px,1.6vw,18px);
  margin-top:var(--sp-6);perspective:900px}
#run .card{width:clamp(52px,7.5vw,86px);aspect-ratio:5/7;position:relative;
  border:1px solid var(--border-gold-strong);background:var(--bp-navy-deep);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(46px) rotateY(70deg);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
#run .card.dealt{opacity:1;transform:translateY(0) rotateY(0)}
#run .card i{width:62%;aspect-ratio:3600/1528;
  background-image:var(--gold-surface);
  background-size:var(--gold-scale-tight),var(--gold-scale-tight);
  background-position:var(--gold-origin),var(--gold-origin);background-repeat:no-repeat;
  -webkit-mask:url(../img/logo_boat_mask_web.png) center/contain no-repeat;
  mask:url(../img/logo_boat_mask_web.png) center/contain no-repeat}
#run .rline{text-align:center;margin-top:var(--sp-6)}

/* ---------- 4 · fleet ---------- */
#fleet{padding:0}
#fleet .media{position:absolute;inset:0}
#fleet .media img{width:100%;height:118%;object-fit:cover;object-position:63% center;
  will-change:transform}
#fleet .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bp-navy-deep) 0%,rgba(10,31,68,.55) 30%,rgba(10,31,68,.68) 70%,var(--bp-navy-deep) 100%)}
#fleet .inner{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;gap:var(--sp-5)}
#fleet h2.display{letter-spacing:.3em;transition:letter-spacing var(--dur-reveal) var(--ease-out)}
#fleet.seen h2.display{letter-spacing:.16em}
#fleet .bar{color:var(--text-primary);font-size:var(--fs-lead);max-width:46ch}
#fleet .cred{border-top:var(--hairline) solid var(--border-gold);
  padding-top:var(--sp-4);margin-top:var(--sp-3);display:flex;align-items:center;
  gap:var(--sp-4);color:var(--text-secondary);font-size:var(--fs-sm)}
#fleet .cred img{width:74px}

/* ---------- 5 · weekend ---------- */
#weekend .media{position:absolute;inset:0;opacity:.12;pointer-events:none}
#weekend .media img{width:100%;height:112%;object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 78%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 78%);will-change:transform}
#weekend .inner{max-width:820px}
#weekend .head{margin-bottom:var(--sp-7)}
.timeline{position:relative;padding-left:clamp(28px,5vw,44px)}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--gold-amber),var(--gold-core) var(--tl,0%),var(--bp-navy-mid) var(--tl,0%))}
.tl{position:relative;padding:0 0 var(--sp-6)}
.tl::before{content:"";position:absolute;left:calc(-1 * clamp(28px,5vw,44px) + 4px);top:7px;
  width:9px;height:9px;border-radius:50%;background:var(--bp-navy-mid);
  transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.tl.lit::before{background:var(--gold-sheen);box-shadow:0 0 12px 2px rgba(255,248,227,.35)}
.tl .t{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-label);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.tl .t.gold{color:var(--gold-light)}
.tl h3{font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:var(--fs-h3);color:var(--text-primary);margin:var(--sp-1) 0}
.tl p{color:var(--text-muted);max-width:52ch}

/* ---------- 6 · the table ---------- */
#table{background-color:var(--surface-bar);
  background-image:var(--texture-dust);background-size:var(--texture-dust-size)}
#table .inner{display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,7fr);
  gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:880px){#table .inner{grid-template-columns:1fr}}
#table .photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
#table .photos figure{overflow:hidden;position:relative}
#table .photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform var(--dur-slow) var(--ease-out)}
#table .photos figure:hover img{transform:scale(1.03)}
#table .photos figure:nth-child(3){grid-column:1/-1}
#table .photos figure:nth-child(3) img{aspect-ratio:21/9}
#table figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;
  font-size:var(--fs-micro);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-secondary);
  background:linear-gradient(180deg,transparent,rgba(6,21,50,.85))}

/* ---------- 7 · harbor ---------- */
#harbor .media{position:absolute;inset:0;opacity:.14}
#harbor .media img{width:100%;height:100%;object-fit:cover}
#harbor .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:880px){#harbor .inner{grid-template-columns:1fr}}
#harbor .head{grid-column:1/-1;text-align:center;margin-bottom:var(--sp-4)}
#harbor .half{border:var(--hairline) solid var(--border-subtle);
  background:color-mix(in srgb,var(--bp-navy-deep) 72%,transparent);
  padding:clamp(22px,3.4vw,44px)}
#harbor .half img{aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:var(--sp-5)}
#harbor .half h3{font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:var(--fs-h3);color:var(--text-primary);margin-bottom:var(--sp-3)}
#harbor .half p{color:var(--text-muted);margin-bottom:var(--sp-3)}
#harbor .conc{grid-column:1/-1;text-align:center;margin-top:var(--sp-5)}
#harbor .conc .lead-in{display:block;margin-bottom:var(--sp-4)}

/* ---------- 7b · pedigree band — the producer, the proof, the people ---------- */
#pedigree{background:var(--surface-bar);border-top:var(--rule-gold) solid transparent;
  border-bottom:var(--rule-gold) solid transparent;position:relative;
  padding:var(--sp-9) var(--sp-gutter)}
#pedigree::before,#pedigree::after{content:"";position:absolute;left:0;right:0;
  height:var(--rule-gold);background-image:var(--bp-gold-rule)}
#pedigree::before{top:0}
#pedigree::after{bottom:0}
#pedigree .inner{max-width:var(--max-content);text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:var(--sp-5)}
#pedigree .badge{width:88px}
#pedigree .prose{margin:0 auto}
#pedigree .contact{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text-muted)}
#pedigree .contact a{color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--border-gold);padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
#pedigree .contact a:hover{color:var(--gold-light);border-color:var(--border-gold-strong)}

/* ---------- 8 · invitation ---------- */
#invite .inner{text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-5)}
#invite .mark2{width:min(230px,42vw);
  -webkit-mask-image:url(../img/logo_boat_mask_web.png);
  mask-image:url(../img/logo_boat_mask_web.png);
  background-position:62% 68%,62% 68%}
#invite .fine{font-size:var(--fs-sm);color:var(--text-muted)}
#invite .others{margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--text-muted)}
#invite .others a{color:var(--text-secondary)}
footer{border-top:var(--hairline) solid var(--border-subtle);
  padding:var(--sp-6) var(--sp-gutter);display:flex;align-items:center;gap:var(--sp-5);
  justify-content:center;flex-wrap:wrap}
footer img{width:64px}
footer .f{font-size:var(--fs-micro);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);text-align:center;line-height:2}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  #arrival .media img{animation:none}
  #arrival .cue{display:none}
  #run{min-height:100vh}
  #run .course{stroke-dashoffset:0 !important}
  #run .card{opacity:1;transform:none}
  .timeline::before{--tl:100%}
  .tl::before{background:var(--gold-sheen)}
  .js .rv{opacity:1;transform:none}
  .js .sep i{transform:scaleX(1)}
  .js .sep .sboat{opacity:1}
  #fleet h2.display{letter-spacing:.16em}
}