/* Page-specific rules for the home page. Shared rules live in base.css (loaded first). */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 45%}
/* hero: photo strip, copper ridge line, headline a word at a time (Jason picked Mix 2) */
.hero .hstrip{position:absolute;z-index:0;top:0;bottom:0;left:0;display:flex;gap:3px;width:600%;transform:translateX(17%);animation:hs-in 2.2s cubic-bezier(.12,.6,.3,1) .35s forwards,hs-loop 110s linear 2.55s infinite}
.hero .hstrip img{position:static;inset:auto;flex:1 1 0;min-width:0;width:auto;height:100%;object-fit:cover;object-position:50% 40%;animation:none;transform:none}
@keyframes hs-in{to{transform:translateX(0)}}
@keyframes hs-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero .hridge{position:absolute;z-index:1;left:0;top:30%;width:100%;height:50%;overflow:visible;pointer-events:none}
.hero .hridge polyline{fill:none;stroke:var(--copper-lit);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hs-draw 1.6s cubic-bezier(.4,0,.2,1) .1s forwards}
@keyframes hs-draw{to{stroke-dashoffset:0}}
.hero::after{z-index:1;background:linear-gradient(180deg,#0b0d0c99 0,#0b0d0c8f calc(env(safe-area-inset-top,0px) + 76px),#0b0d0c00 max(22%,calc(env(safe-area-inset-top,0px) + 150px)),#0b0d0c00 40%,#0b0d0ccc 100%),linear-gradient(90deg,#0b0d0c85 0,#0b0d0c00 58%)}
.hero h1 .hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-top:.06em}
.hero h1 .hw i{display:inline-block;font-style:normal;transform:translateY(112%);animation:hs-rise .7s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(.1s + var(--n) * .14s)}
@keyframes hs-rise{to{transform:none}}
.hero-side{opacity:0;animation:hs-show .7s ease 1.2s forwards}
@keyframes hs-show{to{opacity:1}}
.paused .hero .hstrip{animation-play-state:paused}
/* phones: each photo gets a full screen width, framed on its subject */
@media (max-width:820px){.hero .hstrip{width:1400%}.hero .hridge polyline{stroke-width:7}
  .hero .hstrip img.s-door{object-position:22% 40%}.hero .hstrip img.s-gym{object-position:64% 40%}.hero .hstrip img.s-cricket{object-position:76% 40%}.hero .hstrip img.s-run{object-position:52% 40%}}
@media (prefers-reduced-motion:reduce){.hero .hstrip{animation:none;transform:translateX(0)}.hero .hridge polyline{animation:none;stroke-dashoffset:0}.hero h1 .hw i{animation:none;transform:none}.hero-side{animation:none;opacity:1}}

.ticker a{text-decoration:none}
.ticker a:hover{text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:.1em;text-underline-offset:.16em}
.look img{width:100%;height:clamp(340px,56vw,760px);object-fit:cover;object-position:34% 40%}
.track{position:relative;height:calc(3 * 80vh + 100vh)}
/* no inline style attributes (CSP style-src self): hero headline words stagger by class */
.hero h1 .hw i.n0{--n:0}
.hero h1 .hw i.n1{--n:1}
.hero h1 .hw i.n2{--n:2}
.hero h1 .hw i.n3{--n:3}
.hero h1 .hw i.n4{--n:4}