/* Motion is an enhancement: the static page remains readable. */
@layer base {
  .reading-progress { position:fixed; z-index:80; top:0; left:0; height:2px; width:100%; background:var(--mint); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }
}
@layer components {
  .hero-image { will-change:transform; transform:translate3d(0,var(--hero-shift,0px),0) scale(1.055); }
  .motion-on .hero-content>.eyebrow,.motion-on .hero-content h1,.motion-on .hero-copy,.motion-on .hero-buttons,.motion-on .hero-note,.motion-on .hero-spot { animation:hero-arrive 1.05s var(--ease) both; }
  .motion-on .hero-content>.eyebrow { animation-delay:.08s; }
  .motion-on .hero-content h1 { animation-delay:.18s; }
  .motion-on .hero-copy { animation-delay:.31s; }
  .motion-on .hero-buttons { animation-delay:.44s; }
  .motion-on .hero-note { animation-delay:.54s; }
  .motion-on .hero-spot { animation-delay:.65s; }
  .film-jump { color:#d5e5d5; }
  .jump-play { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; border:1px solid #c4dac578; font-size:8px; }
  @keyframes hero-arrive { from { opacity:0; transform:translate3d(0,34px,0); filter:blur(5px); } to { opacity:1; transform:translate3d(0,0,0); filter:blur(0); } }
  .can-reveal [data-reveal] { opacity:0; transform:translate3d(0,34px,0); transition:opacity .85s var(--ease),transform .85s var(--ease); transition-delay:var(--reveal-delay,0s); }
  .can-reveal [data-reveal].is-revealed { opacity:1; transform:translate3d(0,0,0); }
  .photo-story { padding-bottom:90px; border-bottom:1px solid var(--line); }
  .photo-story-heading { display:grid; grid-template-columns:1.1fr 1fr; column-gap:14%; align-items:end; margin-bottom:58px; }
  .photo-story-heading .eyebrow { grid-column:1/-1; color:var(--mint); margin-bottom:25px; }
  .photo-story-heading>p:last-child { font-size:19px; color:var(--muted); max-width:390px; margin-bottom:5px; }
  .photo-story-grid { display:grid; grid-template-columns:.95fr 1.15fr; gap:6%; align-items:start; }
  .photo-frame { min-width:0; }
  .photo-crop { position:relative; overflow:hidden; isolation:isolate; border-radius:7px; background:#18271c; }
  .street-frame .photo-crop { aspect-ratio:4/5; }
  .portrait-frame .photo-crop { aspect-ratio:3/2; margin-top:75px; }
  .photo-crop img { width:100%; height:100%; object-fit:cover; transform:scale(1.045) translate3d(0,var(--photo-shift,0px),0); transition:transform 1.2s var(--ease); }
  .street-frame img { object-position:50% 67%; }
  .portrait-frame img { object-position:47% 50%; }
  .photo-label { position:absolute; left:0; right:0; bottom:0; padding:72px 28px 28px; background:linear-gradient(0deg,#031007c7,transparent); }
  .photo-label span { font:11px 'Courier New',monospace; letter-spacing:1.2px; color:#d2e2d3; }
  .photo-label strong { display:block; font-size:26px; letter-spacing:-.65px; font-weight:400; margin-top:12px; }
  .photo-frame figcaption { color:#819987; font-size:12px; margin-top:15px; line-height:1.5; display:flex; gap:9px; flex-wrap:wrap; }
  .photo-frame figcaption a:hover { color:var(--mint); }
  .photo-focus { position:absolute; inset:24px; border:1px solid #eef9ea00; pointer-events:none; transition:border-color .6s,opacity .6s; opacity:0; }
  .photo-focus::before,.photo-focus::after { content:''; position:absolute; width:24px; height:24px; border-color:#eef9ea; border-style:solid; }
  .photo-focus::before { left:0; top:0; border-width:1px 0 0 1px; }
  .photo-focus::after { right:0; bottom:0; border-width:0 1px 1px 0; }
  .photo-story-note { display:flex; flex-direction:column; align-items:flex-start; gap:27px; padding:40px 0 0; max-width:440px; }
  .note-rule { width:42px; height:1px; background:var(--mint); }
  .photo-story-note p { font-size:27px; line-height:1.3; letter-spacing:-.6px; color:#c3d3c5; }
  .feature-preview { transition:box-shadow .6s var(--ease); }
  .app-phone { transition:transform .8s var(--ease); }
  .logo-mark { transition:transform .7s var(--ease); }
  .feature-tab strong { transition:color .25s,transform .35s var(--ease); }
  .feature-tab[aria-selected="true"] strong { transform:translateX(5px); }
  .button { position:relative; overflow:hidden; }
  .button.primary::before { content:''; position:absolute; top:-20%; bottom:-20%; width:35%; left:-65%; background:linear-gradient(90deg,transparent,#fff5,transparent); transform:skewX(-22deg); transition:left .8s var(--ease); pointer-events:none; }
  .button.primary:hover::before { left:135%; }
  .cinema-section { min-height:680px; scroll-margin-top:110px; }
  .cinema-section .cinema-poster,.cinema-section video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .cinema-section video { opacity:0; transition:opacity 1.2s var(--ease); }
  .cinema-section.has-film video { opacity:1; }
  .cinema-section .cinema-poster { object-position:50% 50%; transition:opacity 1.2s; }
  .cinema-section.has-film .cinema-poster { opacity:0; }
  .cinema-section .field-overlay { background:linear-gradient(90deg,#07150dd9,#06110915),linear-gradient(0deg,#040d0990,transparent 55%); }
  .cinema-section .field-copy { padding-top:132px; padding-bottom:112px; }
  .cinema-top,.cinema-bottom { position:absolute; left:5%; right:5%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .cinema-top { top:29px; }
  .cinema-bottom { bottom:27px; font-size:12px; color:#c5d3c9; }
  .cinema-bottom a { font-size:11px; color:#afc6b6; }
  .cinema-bottom a:hover { color:var(--mint); }
  .film-format { font:11px 'Courier New',monospace; letter-spacing:1.2px; color:#cfe0d2; }
  .film-toggle { display:flex; align-items:center; gap:10px; font-size:13px; padding:12px 16px; border:1px solid #aec2b55a; background:#0b1c137a; backdrop-filter:blur(12px); border-radius:4px; color:var(--text); }
  .film-toggle:hover { background:#1a3324d9; border-color:#b5f2ce9f; }
  .play-glyph { font-size:11px; width:12px; text-align:center; }
}
@layer responsive {
  @media (hover:hover) and (pointer:fine) { .photo-crop:hover img { transform:scale(1.085); } .photo-crop:hover .photo-focus { opacity:.8; } .feature-preview:hover { box-shadow:inset 0 0 70px #b5f2ce08; } .app-phone:hover { transform:rotate(0deg) translateY(-8px); } .wordmark:hover .logo-mark { transform:rotate(90deg); } }
  @media (max-width:1000px) { .photo-story-heading { gap:7%; } .photo-story-heading>p:last-child { font-size:17px; } .photo-label strong { font-size:23px; } }
  @media (max-width:700px) { .photo-story-heading { grid-template-columns:1fr; gap:24px; } .photo-story-heading .eyebrow { margin-bottom:0; } .photo-story-heading>p:last-child { max-width:470px; } .photo-story-grid { gap:22px; } .portrait-frame .photo-crop { margin-top:45px; aspect-ratio:4/5; } .photo-label { padding:50px 18px 20px; } .photo-label strong { font-size:20px; } .photo-story-note p { font-size:20px; } .photo-story-note .text-link { font-size:14px; } }
  @media (max-width:600px) {
    .header-actions .button.small>span:last-child { display:none; }
    .header-actions .button.small { white-space:nowrap; min-height:44px; }
    .hero { min-height:820px; }
    .photo-story { padding-bottom:65px; }
    .photo-story-heading { margin-bottom:35px; }
    .photo-story-grid { grid-template-columns:1fr; gap:35px; }
    .street-frame .photo-crop { aspect-ratio:4/5; }
    .portrait-frame .photo-crop { margin-top:0; aspect-ratio:6/5; }
    .photo-label { padding:65px 23px 25px; }
    .photo-label span { font-size:11px; }
    .photo-label strong { font-size:25px; }
    .photo-frame figcaption { font-size:11px; }
    .photo-story-note { padding:30px 0 0; gap:22px; }
    .photo-story-note p { font-size:26px; }
    .photo-story-note .text-link { font-size:16px; }
    .cinema-section { min-height:670px; scroll-margin-top:96px; }
    .cinema-top,.cinema-bottom { left:7%; right:7%; gap:12px; }
    .film-format { font-size:9px; max-width:125px; line-height:1.6; }
    .film-toggle { padding:12px; font-size:12px; }
    .cinema-section .field-copy { padding-top:115px; padding-bottom:120px; }
    .cinema-bottom { flex-direction:column; align-items:flex-start; gap:9px; font-size:11px; }
    .cinema-section video { object-position:55% 50%; }
    .can-reveal [data-reveal] { transform:translate3d(0,22px,0); }
  }
  @media (prefers-reduced-motion:reduce) { .hero-image,.photo-crop img,.photo-crop:hover img { transform:none!important; } .reading-progress { display:none; } .can-reveal [data-reveal] { opacity:1!important; transform:none!important; } }
  .motion-paused .hero-image,.motion-paused .photo-crop img { transform:none!important; }
}
