/* ========================================================================== Pegesis — Cinematic Intro (Apple-style) File: /static/pegesis_intro.css Scope: ONLY the intro section + the HUD toolbar/select inside #hero ========================================================================== */ :root{ /* Scene */ --intro-bg:#0B0F13; --intro-text:#f5f5f7; --intro-sub:#c8c8cc; /* CTA (frosted pill) */ --pill-bg:rgba(255,255,255,.10); --pill-border:rgba(255,255,255,.24); --pill-text:#f5f5f7; /* Vignette */ --intro-vignette-inner:rgba(0,0,0,.12); --intro-vignette-outer:rgba(0,0,0,.28); /* Easing */ --ease:cubic-bezier(.2,.8,.2,1); /* HUD spacing */ --hud-bottom-gap: 84px; /* mobile select height + breathing room */ } /* Ensure #hero provides a sticky context and room so HUD can sit on viewport edge */ #hero{ position:relative; min-height:100svh; padding-bottom: calc(var(--hud-bottom-gap) + env(safe-area-inset-bottom)); z-index:0; /* canvases/video below HUD */ } /* =========================== CINEMATIC INTRO =========================== */ .cinematic-intro{ position:relative; background:var(--intro-bg); color:var(--intro-text); min-height:100svh; overflow:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .cinematic-intro .intro-wrap{ position:relative; height:100svh; width:100%; isolation:isolate; } /* Full-frame video */ .cinematic-intro .intro-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; background:var(--intro-bg); z-index:0; } /* Vignette + dimmer */ .cinematic-intro .intro-vignette{ position:absolute; inset:-10%; pointer-events:none; z-index:1; background: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,0) 0%, var(--intro-vignette-inner) 60%, var(--intro-vignette-outer) 100%); } .cinematic-intro .intro-dimmer{ position:absolute; inset:0; background:#000; opacity:0; z-index:2; pointer-events:none; } /* Copy */ .cinematic-intro .intro-copy{ position:absolute; inset:0; z-index:4; display:grid; place-content:center; justify-items:center; text-align:center; gap:16px; padding:0 4vw; } .cinematic-intro .intro-title{ margin:0; font:700 clamp(28px,6.4vw,72px)/1.06 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; letter-spacing:.004em; } .cinematic-intro .intro-sub{ margin:0; color:var(--intro-sub); font:400 clamp(14px,2.2vw,18px)/1.5 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; } /* Explore pill */ .cinematic-intro .intro-cta{ position:absolute; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px; color:var(--pill-text); text-decoration:none; background:var(--pill-bg); border:1px solid var(--pill-border); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); font:600 13px/1 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; letter-spacing:.012em; white-space:nowrap; width:fit-content; opacity:0; transform-origin:50% 100%; transition:opacity .28s var(--ease), filter .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease); will-change:opacity; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .cinematic-intro .intro-cta.show{ opacity:1; } .cinematic-intro .intro-cta:hover{ filter:brightness(1.06); } .cinematic-intro .intro-cta:active{ filter:brightness(.98); } .cinematic-intro .intro-cta .icon{ width:18px; height:18px; display:block; } /* =========================== HUD CONTROLS (scoped to #hero) - Sticky wrapper keeps bar at viewport bottom while #hero is visible - Centered and high z-index =========================== */ /* Sticky wrapper — works for both desktop & mobile variants */ #hero .hud-nav-stick{ position:-webkit-sticky; position:sticky; bottom:calc(16px + env(safe-area-inset-bottom)); left:0; width:100%; z-index:1001; display:flex; justify-content:center; pointer-events:none; /* wrapper inert; children clickable */ transform: translateZ(0); /* guards against compositor quirks */ } /* DESKTOP: segmented control */ #hero .hud-mode-toolbar{ display:none; /* toggled in MQ below */ pointer-events:auto; /* receives clicks */ } #hero .segmented{ display:inline-flex; align-items:center; gap:12px; height:48px; padding:0 8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); color:#f5f5f7; position:relative; } #hero .segmented .seg-thumb{ position:absolute; top:5px; left:5px; height:38px; width:44px; border-radius:999px; background:#f5f5f7; z-index:0; transition:transform .28s var(--ease), width .28s var(--ease); transform: translateX(-1px); } #hero .segmented .seg{ position:relative; z-index:1; cursor:pointer; padding:10px 14px; border-radius:999px; font:600 14px/1 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; color:rgba(245,245,247,.82); border:0; background:transparent; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } #hero .segmented .seg:hover{ color:#fff; } #hero .segmented .seg:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.25); border-radius:999px; } #hero .segmented .seg.active{ color:#000; } /* MOBILE: single select (Apple-like) */ #hero .hud-mode-select{ display:none; /* toggled in MQ */ pointer-events:auto; } #hero .hud-mode-select select{ -webkit-appearance:none; appearance:none; height:46px; min-width:220px; max-width:86vw; padding:0 44px 0 16px; /* room for chevron */ color:#f5f5f7; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); font:600 13px/1 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; color-scheme:dark; /* Chevron stays INSIDE the body */ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; background-size:14px 14px; } #hero .hud-mode-select .caret{ display:none !important; } /* Keep the narrative card lifted above the controls on mobile */ #hero .hud-card{ margin:0 auto; max-width:min(92vw,680px); margin-bottom:calc(var(--hud-bottom-gap) + env(safe-area-inset-bottom)); } /* Desktop vs Mobile toggles */ @media (min-width:900px){ #hero .hud-mode-toolbar{ display:block; } #hero .hud-mode-select{ display:none; } #hero .hud-card{ margin-bottom:32px; } } @media (max-width:899.98px){ #hero .hud-mode-select{ display:block; } } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ .cinematic-intro .intro-cta{ transition:none !important; } #hero .segmented .seg-thumb{ transition:none !important; } }