/* Landing page (templates/site.html), from web/design/Combined.dc.html. Tokens, .glass, .sr, .eyebrow — yoken.css */

/* the mockup was laid out with browser defaults: undo yoken.css's global border-box and form/heading styles inside the page */
.site * { box-sizing: revert; }
.site :is(h1, h2, h3) { line-height: inherit; }
.site select { min-height: 0; }
[hidden] { display: none !important; }
.site button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lift:hover { border-color: rgba(60,202,255,0.35) !important; }
.vgrid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.vgrid > .vbig { grid-row: 1 / span 2; }
.vgrid > div { display: flex; min-width: 0; }
.vgrid > div > figure { flex: 1; }
@media (max-width: 860px) { .vgrid { grid-template-columns: 1fr; grid-template-rows: none; } .vgrid > .vbig { grid-row: auto; } .vgrid .vsm { aspect-ratio: 16/9; } }
.strip { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 32px; padding: 14px 32px 22px; scrollbar-width: thin;
  scrollbar-color: rgba(120,160,255,0.35) transparent; outline: none; }
.strip:focus-visible { box-shadow: inset 0 0 0 2px rgba(60,202,255,0.6); border-radius: 22px; }
.reel { --per: 3; }
@media (max-width: 960px) { .reel { --per: 2; } }
@media (max-width: 640px) { .reel { --per: 1; } }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-16px) rotate(0.5deg); } }
@keyframes shade { 0%, 100% { transform: scaleX(1); opacity: 0.75; } 50% { transform: scaleX(0.82); opacity: 0.4; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes breathe { 0%, 100% { transform: scale(0.55); } 50% { transform: scale(1); } }
@keyframes reach { 0% { transform: scale(0.3); } 55%, 100% { transform: scale(1); } }
@keyframes come { 0% { transform: scale(0.55); } 70%, 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(63,212,122,0.22), 0 0 18px rgba(63,212,122,0.6); }
  50% { box-shadow: 0 0 0 9px rgba(63,212,122,0.1), 0 0 30px rgba(63,212,122,0.9); } }
.float { animation: float 6s ease-in-out infinite; }
.shade { animation: shade 6s ease-in-out infinite; }
.bob-1 { animation: bob 5s ease-in-out infinite; }
.bob-2 { animation: bob 6.5s ease-in-out -2s infinite; }
.bob-3 { animation: bob 5.8s ease-in-out -4s infinite; }
.breathe { animation: breathe 3.6s ease-in-out infinite; transform-origin: 0 100%; }
.reach { animation: reach 3.2s cubic-bezier(.3,.7,.3,1) infinite; transform-origin: 0 100%; }
.come { animation: come 3.6s ease-in-out infinite; transform-origin: 0 100%; }
.pulse { animation: pulse 2.8s ease-in-out infinite; }
.lift { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.lift:hover { transform: translateY(-10px); box-shadow: 0 26px 60px rgba(0,0,0,0.5), 0 18px 50px -24px rgba(59,123,255,0.7); }
.layer { transition: transform .25s ease-out; }
/* reveal on scroll: site.js adds .motion to #site only with IntersectionObserver and without reduced motion */
.motion [data-rv] { transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.motion [data-rv]:not([data-in]) { opacity: 0; transform: translateY(56px); }
.motion [data-rv="l"]:not([data-in]) { transform: translateX(-90px); }
.motion [data-rv="r"]:not([data-in]) { transform: translateX(90px); }
@media (prefers-reduced-motion: reduce) {
  .float, .shade, .bob-1, .bob-2, .bob-3, .breathe, .reach, .come, .pulse { animation: none; }
  .lift, .lift:hover { transform: none; }
}

/* buttons that were inline-styled per state in the mockup */
.btn-ghost { font: inherit; font-weight: 600; cursor: pointer; color: #e9eefb; background: rgba(120,160,255,0.08); border: 1px solid rgba(120,160,255,0.24); border-radius: 12px; }
.btn-ghost:hover { color: #e9eefb; }
.arrow { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.segs { gap: 4px; padding: 4px; background: rgba(120,160,255,0.06); border: 1px solid rgba(120,160,255,0.22); }
.seg { font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; border: 0; color: #c3cbe0; background: transparent; }
.seg[aria-checked="true"] { color: #021018; background: var(--accent); }
.stab { font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  color: #e9eefb; border: 1px solid rgba(120,160,255,0.22); background: rgba(120,160,255,0.05); }
.stab[aria-pressed="true"] { border-color: var(--accent); background: rgba(60,202,255,0.12); }

/* HUD style picker */
.hs-cap { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #7f8aa6; }
.hs-sw { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 3px solid rgba(5,8,15,0.9); box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.hs-sw[aria-checked="true"] { border-color: #ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 16px var(--c); }
.hud-range { all: revert; width: 100%; accent-color: var(--hud-col, #3ccaff); height: 28px; cursor: pointer; }

/* footer logo is a little smaller than the header one */
.foot .logo { gap: 12px; }
.foot .logo > img { height: 26px; }