/* forside.css — full-screen landing: a night falls over the fair, the hall draws itself,
   windows light up one by one, the carpet rolls out to the door and people walk in.
   Three exits; the main door is a real door — the camera walks through it.

   Timeline (seconds, all CSS; site.js only adds .is-run, parallax and the exits):
   0.0 sky · 0.3 stars · 0.4 back hall draws · 0.9 front hall draws · 0.6 title lines
   1.6 plaza + carpet · 2.0–3.6 windows · 2.4 sign · 2.6 flags + lamps · 3.0 beams, walkers
   3.2 exits. The camera settles from a slow dolly (scale 1.14 → 1) over the first 5s. */

.forside { position: relative; height: 100vh; height: 100svh; min-height: 40rem; overflow: hidden; background: #03130f; --mx: 0; --my: 0; }
.forside__cam { position: absolute; inset: 0; transform-origin: 50% 70%; animation: f-dolly 5.5s cubic-bezier(.16, 1, .3, 1) both; will-change: transform; }
.hal { width: 100%; height: 100%; display: block; }
.hal .px { transform: translate(calc(var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * .5px)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }

/* sky + stars */
.hal .sky { animation: f-fade 1.6s ease both; }
.hal .stars circle { fill: #fff; opacity: 0; animation: f-twinkle var(--t, 3s) ease-in-out calc(.3s + var(--i) * 25ms) infinite alternate; }
.hal .stars circle:nth-child(5n) { fill: var(--ug-warning); }
.hal .far { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.4; stroke-linejoin: round; opacity: 0; animation: f-fade 2s ease .5s both; }
.hal .hz-glow { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: f-glow 3s cubic-bezier(.16, 1, .3, 1) 1.2s both, f-breathe 6s ease-in-out 4.2s infinite alternate; }

/* searchlights sweep behind the hall */
.hal .beam { transform-box: fill-box; opacity: 0; mix-blend-mode: screen; }
.hal .beam--l { transform-origin: 50% 100%; animation: f-fade 1.5s ease 3s both, f-sweep-l 9s ease-in-out 3s infinite alternate; }
.hal .beam--r { transform-origin: 50% 100%; animation: f-fade 1.5s ease 3.3s both, f-sweep-r 11s ease-in-out 3.3s infinite alternate; }

/* the hall */
.hal .line { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hal .line--q { stroke: rgba(255,255,255,.42); stroke-width: 1.5; }
.forside.is-run .hal .line { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: f-draw 2.2s cubic-bezier(.6, .05, .2, 1) .9s forwards; }
.forside.is-run .hal .back .line { animation-delay: .4s; animation-duration: 2.6s; }
.forside.is-run .hal .flags .line { animation-delay: 2.2s; animation-duration: 1s; }
.forside.is-run .hal .tree .line { animation-delay: 1.8s; animation-duration: .8s; }
.hal .fill { fill: rgba(255,255,255,.07); animation: f-fade 1.2s ease 1.9s both; }
.hal .fill--back { fill: rgba(255,255,255,.035); animation-delay: 1.4s; }
.hal .roofglass path { fill: var(--ug-warning); opacity: 0; animation: f-lightup 1s ease calc(2.2s + var(--i) * .16s) both; }
.hal .tree__c { fill: rgba(131,185,173,.35); stroke: rgba(255,255,255,.4); stroke-width: 1.4; transform-box: fill-box; transform-origin: 50% 100%; animation: f-pop .8s cubic-bezier(.34, 1.56, .64, 1) calc(2s + var(--i) * .12s) both, f-sway 4s ease-in-out 3s infinite alternate; }
.hal .win { fill: var(--ug-warning); opacity: 0; animation: f-lightup 1s ease calc(2s + var(--i) * .11s) both, f-flicker 7s steps(1) calc(4s + var(--i) * .7s) infinite; }
.hal .win:nth-child(3n) { fill: #ffe29a; }
.hal .band { fill: var(--ug-brand-10); stroke: rgba(255,255,255,.2); animation: f-fade 1s ease 1.6s both; }
.hal .sign { fill: #fff; font-family: var(--ug-font); font-size: 25px; font-weight: 700; letter-spacing: -.01em; opacity: 0; animation: f-neon 1.4s ease 2.4s both; }
.hal .sign .lt { font-weight: 300; }
.hal .sign .bd { fill: var(--ug-accent-70); }
.hal .entry { fill: rgba(255,240,117,.16); animation: f-fade 1s ease 2.3s both; }
.hal .canopy { fill: var(--ug-accent-60); transform-box: fill-box; transform-origin: 50% 50%; animation: f-growx .9s cubic-bezier(.16, 1, .3, 1) 1.9s both; }
.hal .door rect { fill: var(--ug-accent-60); stroke: rgba(0,0,0,.18); }
.hal .door__h { stroke: var(--ug-brand-10); stroke-width: 3; stroke-linecap: round; }
.hal .door { transform-box: fill-box; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.hal .door--l { transform-origin: 0 50%; } .hal .door--r { transform-origin: 100% 50%; }
.hal .door-glow { opacity: .35; transition: opacity .6s ease; animation: f-fade 1.2s ease 2.4s both; }
.forside:has(.exit--door:hover) .door--l, .forside:has(.exit--door:focus-visible) .door--l, .forside.is-entering .door--l { transform: scaleX(.12) skewY(10deg); }
.forside:has(.exit--door:hover) .door--r, .forside:has(.exit--door:focus-visible) .door--r, .forside.is-entering .door--r { transform: scaleX(.12) skewY(-10deg); }
.forside:has(.exit--door:hover) .door-glow, .forside.is-entering .door-glow { opacity: 1; }
.hal .flag { opacity: 0; animation: f-fade .6s ease calc(2.6s + var(--i) * .15s) both; }
.hal .flag__cloth { transform-box: fill-box; transform-origin: 0 50%; animation: f-wave 1.5s ease-in-out calc(var(--i) * -.4s) infinite alternate; }
.hal .flag--a { fill: var(--ug-accent-60); } .hal .flag--w { fill: var(--ug-warning); } .hal .flag--g { fill: var(--ug-gron-60); } .hal .flag--wh { fill: #fff; }

/* plaza, carpet, lamps, people */
.hal .plaza path { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 1.3; }
.hal .plaza { opacity: 0; animation: f-fade 1.6s ease 1.5s both; }
.hal .carpet { transform-box: fill-box; transform-origin: 50% 0; animation: f-unroll 1.4s cubic-bezier(.65, 0, .35, 1) 1.7s both; }
.hal .carpet-edge { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; opacity: 0; animation: f-fade 1s ease 2.6s both; }
.hal .lamp__pole { stroke: rgba(255,255,255,.7); fill: none; stroke-linecap: round; }
.hal .lamp { opacity: 0; animation: f-fade .5s ease calc(2.4s + (3 - var(--i)) * .18s) both; }
.hal .lamp__bulb { fill: var(--ug-warning); }
.hal .lamp__halo { fill: var(--ug-warning); opacity: 0; animation: f-halo 1.2s ease calc(2.7s + (3 - var(--i)) * .18s) both; }
.hal .walker { opacity: 0; animation: f-walk 10s cubic-bezier(.3, .1, .5, 1) calc(3s + var(--wd)) infinite; }
.hal .walker path, .hal .walker circle { fill: #fff; }
.hal .walker--b path, .hal .walker--b circle { fill: var(--ug-gron-60); }
.hal .walker--u path, .hal .walker--u circle { fill: var(--ug-accent-70); }
.hal .walker--a path, .hal .walker--a circle { fill: var(--ug-slate-60); }
.hal .walker__sh { fill: rgba(0,0,0,.3); }

/* ── Copy ───────────────────────────────────────────────────────────── */
.forside__copy { position: absolute; left: 0; right: 0; top: calc(var(--ug-topbar-h) + 2.2vh); display: grid; justify-items: center; text-align: center; padding: 0 1.5rem; pointer-events: none; }
.forside__eyebrow { font-family: var(--ug-mono); font-size: var(--ug-text-s); letter-spacing: .3em; text-transform: uppercase; color: var(--ug-accent-70); margin: 0 0 1rem; animation: f-track 1.6s cubic-bezier(.16, 1, .3, 1) .3s both; }
.forside__title { color: #fff; font-size: clamp(2.8rem, min(6vw, 9.5vh), 5.75rem); font-weight: var(--ug-weight-light); line-height: 1; letter-spacing: -.035em; text-shadow: 0 4px 40px rgba(0,0,0,.35); }
.forside__title .ln { display: block; overflow: hidden; padding: .04em .1em .12em; }
.forside__title .ln > span { display: inline-block; animation: f-line 1.3s cubic-bezier(.2, .85, .25, 1) both; }
.forside__title .ln:nth-child(1) > span { animation-delay: .55s; }
.forside__title .ln:nth-child(2) > span { animation-delay: .75s; }
.forside__title .lt { font-weight: 300; }
.forside__title .em { font-weight: var(--ug-weight-bold); color: var(--ug-accent-70); }
.forside__sub { color: var(--ug-on-brand-quiet); font-size: clamp(1.02rem, 1.4vw, 1.25rem); max-width: 46ch; margin: 1.1rem auto 0; text-shadow: 0 1px 14px rgba(0,0,0,.4); animation: f-rise 1.1s cubic-bezier(.16, 1, .3, 1) 1.5s both; }

/* ── Exits ──────────────────────────────────────────────────────────── */
/* padding-inline keeps the side exits clear of the two fixed bubbles */
.exits { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding: 0 12.5rem 1.6rem; }
.exit { display: inline-flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--ug-on-brand); padding: .9rem 1.25rem; border-radius: var(--ug-radius-l); border: 1px solid rgba(255,255,255,.28); background: rgba(4,21,18,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .25s var(--ug-ease), background .25s, border-color .25s; min-width: 13rem; animation: f-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.exit--left { animation-delay: 3.35s; } .exit--door { animation-delay: 3.15s; } .exit--right { animation-delay: 3.5s; }
.exit:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: var(--ug-on-brand); }
.exit__main { font-weight: var(--ug-weight-bold); font-size: var(--ug-text-xl); display: flex; align-items: center; gap: .5rem; }
.exit__hint { font-size: var(--ug-text-s); color: var(--ug-on-brand-soft); }
.exit--left { justify-self: start; }
.exit--right { justify-self: end; text-align: right; }
.exit--right .exit__main { justify-content: flex-end; }
.exit--door { justify-self: center; align-items: center; text-align: center; background: var(--ug-accent-60); border-color: var(--ug-accent-60); color: var(--ug-on-accent); padding: 1.1rem 2rem; min-width: 18rem; box-shadow: 0 0 0 0 rgba(234,114,70,.5), 0 18px 40px -12px rgba(234,114,70,.6); }
.forside.is-run .exit--door { animation: f-rise .9s cubic-bezier(.16, 1, .3, 1) 3.15s both, f-beacon 2.6s ease-out 4.4s infinite; }
.exit--door:hover { background: var(--ug-accent-70); border-color: var(--ug-accent-70); color: var(--ug-on-accent); }
.exit--door .exit__hint { color: rgba(0,0,0,.65); }
.exit--door .exit__main { font-size: 1.35rem; }
.exit__arrow { transition: transform .2s var(--ug-ease); }
.exit--left:hover .exit__arrow { transform: translateX(-4px); }
.exit--right:hover .exit__arrow { transform: translateX(4px); }
.exit--door:hover .exit__arrow { transform: translateY(-3px); }
@media (max-width: 1100px) { .exits { padding-inline: 1.5rem; padding-bottom: 5.75rem; } }
@media (max-width: 800px) {
  .exits { grid-template-columns: 1fr; justify-items: stretch; padding-bottom: 5.25rem; gap: .6rem; }
  .exit, .exit--door { min-width: 0; justify-self: stretch; text-align: left; padding: .75rem 1rem; }
  .exit--door { align-items: flex-start; }
  .exit--right { text-align: left; } .exit--right .exit__main { justify-content: flex-start; }
  .exit__hint { display: none; }
}

/* ── Leaving: the camera moves with you ─────────────────────────────── */
.forside__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 70%), #fff8d6 0%, #fff075 25%, var(--ug-brand) 75%); z-index: 5; }
.forside.is-entering .forside__cam { animation: none; transform-origin: var(--fx, 50%) var(--fy, 70%); transform: scale(9); transition: transform 1.25s cubic-bezier(.7, 0, .84, 0) .35s; }
.forside.is-entering .forside__flash { opacity: 1; transition: opacity .55s ease 1.05s; }
.forside.is-entering .forside__copy, .forside.is-entering .exits { opacity: 0; transform: translateY(-12px); transition: opacity .4s, transform .4s; }
.forside.is-pan-left .forside__cam, .forside.is-pan-right .forside__cam { animation: none; transition: transform .8s cubic-bezier(.7, 0, .84, 0), opacity .8s ease .1s; opacity: 0; }
.forside.is-pan-left .forside__cam { transform: translateX(30%) scale(1.05); }
.forside.is-pan-right .forside__cam { transform: translateX(-30%) scale(1.05); }
.forside.is-pan-left .forside__copy, .forside.is-pan-left .exits, .forside.is-pan-right .forside__copy, .forside.is-pan-right .exits { opacity: 0; transition: opacity .4s; }

@keyframes f-dolly { from { transform: scale(1.14) translateY(2%); filter: brightness(.4); } 40% { filter: none; } to { transform: none; } }
@keyframes f-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes f-twinkle { from { opacity: .08; } to { opacity: .85; } }
@keyframes f-glow { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
@keyframes f-breathe { from { opacity: 1; } to { opacity: .7; } }
@keyframes f-sweep-l { from { transform: rotate(-24deg); } to { transform: rotate(8deg); } }
@keyframes f-sweep-r { from { transform: rotate(22deg); } to { transform: rotate(-10deg); } }
@keyframes f-draw { to { stroke-dashoffset: 0; } }
@keyframes f-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes f-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes f-lightup { 0% { opacity: 0; } 40% { opacity: .95; } 55% { opacity: .3; } 100% { opacity: .85; } }
@keyframes f-flicker { 0%, 100% { opacity: .85; } 92% { opacity: .85; } 93% { opacity: .35; } 95% { opacity: .85; } }
@keyframes f-neon { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: 1; } 55% { opacity: .5; } 100% { opacity: 1; } }
@keyframes f-growx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes f-wave { from { transform: skewY(-8deg) scaleX(.92); } to { transform: skewY(7deg) scaleX(1); } }
@keyframes f-unroll { from { transform: scaleY(0); } to { transform: none; } }
@keyframes f-halo { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: .22; } }
/* people enter from the bottom of the frame and shrink into the door */
@keyframes f-walk {
  0% { opacity: 0; transform: translate(calc(800px + var(--lx) * 3.2), 930px) scale(1.7); }
  8% { opacity: 1; }
  80% { opacity: 1; }
  92% { opacity: 0; transform: translate(calc(800px + var(--lx) * .25), 642px) scale(.3); }
  100% { opacity: 0; transform: translate(800px, 640px) scale(.28); }
}
@keyframes f-track { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .3em; } }
@keyframes f-line { from { transform: translate3d(0, 110%, 0) rotate(3deg); } to { transform: none; } }
@keyframes f-rise { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes f-beacon { 0% { box-shadow: 0 0 0 0 rgba(234,114,70,.55), 0 18px 40px -12px rgba(234,114,70,.6); } 100% { box-shadow: 0 0 0 18px rgba(234,114,70,0), 0 18px 40px -12px rgba(234,114,70,.6); } }

@media (prefers-reduced-motion: reduce) {
  .forside__cam, .hal *, .forside__title .ln > span, .forside__sub, .forside__eyebrow, .exit { animation: none !important; opacity: 1; }
  .hal .stars circle { opacity: .5; } .hal .lamp__halo { opacity: .22; } .hal .walker, .hal .beam { display: none; }
  .hal .win { opacity: .85; }
  .hal :is(.sign, .plaza, .lamp, .flag, .far, .hz-glow, .carpet-edge, .roofglass path, .door-glow) { opacity: 1 !important; }
}

.hal .flag:nth-child(n+3) .flag__cloth { transform-origin: 100% 50%; }