/* Logo intro: a full-screen logo that softly fades into the page.
   Pure CSS timing, so the page still appears if JavaScript is off.
   Variants: .intro.light (white), .intro.dark (navy, glow rings), .intro.wipe (brand gradient, circle opens from the pin). */
@property --hole { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }

.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; cursor: pointer;
  animation: intro-out .8s cubic-bezier(.4, 0, .2, 1) 1.75s forwards; }
.intro .mark { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.intro .pin { width: 104px; height: 104px; opacity: 0; transform: scale(.55); animation: intro-pin .9s cubic-bezier(.2, .9, .3, 1.25) .1s forwards; }
.intro .word { width: 230px; height: auto; opacity: 0; transform: translateY(10px); animation: intro-word .7s ease .6s forwards; }
.intro .tag { font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: .32em; text-transform: uppercase; opacity: 0; animation: intro-word .7s ease .95s forwards; }

.intro.light { background: #fff; }
.intro.light .tag { color: #5B6880; }
.intro.dark { background: radial-gradient(60% 50% at 50% 50%, #0E2456, #040A1C 70%); }
.intro.dark .tag { color: #19E3C2; }
.intro.dark .pin { filter: drop-shadow(0 0 34px rgba(25, 227, 194, .55)); }
.intro.dark .mark::before, .intro.dark .mark::after { content: ""; position: absolute; left: 50%; top: 52px; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 1.5px solid rgba(25, 227, 194, .6); opacity: 0; animation: intro-ring 1.6s ease-out .45s 1; }
.intro.dark .mark::after { animation-delay: .8s; border-color: rgba(31, 107, 255, .6); }
.intro.wipe { background: linear-gradient(135deg, #1F6BFF, #14B8F5 55%, #19E3C2); animation-name: intro-hole; animation-duration: .9s;
  -webkit-mask: radial-gradient(circle at 50% 42%, transparent var(--hole), #000 calc(var(--hole) + .5%)); mask: radial-gradient(circle at 50% 42%, transparent var(--hole), #000 calc(var(--hole) + .5%)); }
.intro.wipe .tag { color: rgba(255, 255, 255, .9); }
.intro.wipe .pin { animation: intro-drop .8s cubic-bezier(.3, 1.4, .5, 1) .1s forwards; transform: translateY(-80px); filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(5, 13, 34, .3)); }

@keyframes intro-pin { to { opacity: 1; transform: none; } }
@keyframes intro-drop { 0% { opacity: 0; transform: translateY(-80px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes intro-word { to { opacity: 1; transform: none; } }
@keyframes intro-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; filter: blur(8px); transform: scale(1.04); } }
@keyframes intro-hole { to { --hole: 150%; visibility: hidden; } }

/* the page underneath rises in as the intro leaves */
.after-intro { animation: page-in 1s cubic-bezier(.2, .7, .2, 1) 1.75s both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.intro.wipe ~ .after-intro { animation-delay: 1.7s; }

/* skipped (tap), already seen this visit, or opened from the design chooser */
.intro.skip { animation: intro-out .35s ease forwards !important; }
.intro.skip ~ .after-intro { animation: page-in .5s ease both !important; }
.seen .intro { display: none; }
.seen .after-intro { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro.wipe { animation: intro-fade .4s ease 1s forwards !important; -webkit-mask: none; mask: none; }
  .intro .pin, .intro .word, .intro .tag { animation: none !important; opacity: 1; transform: none; }
  .intro .mark::before, .intro .mark::after { display: none; }
  .after-intro { animation: none !important; }
  @keyframes intro-fade { to { opacity: 0; visibility: hidden; } }
}
.intro.wipe .word { filter: brightness(0) invert(1); }

/* E · lift: the wordmark rises out of a mask, then the whole screen lifts away */
.intro.lift { background: #0B1530; animation-name: intro-lift; animation-duration: .9s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
.intro.lift .pin { width: 64px; height: 64px; }
.intro.lift .word { width: min(72vw, 520px); opacity: 1; transform: none; clip-path: inset(100% 0 0 0); animation: intro-clip .9s cubic-bezier(.7, 0, .2, 1) .35s forwards; }
.intro.lift .tag { color: #19E3C2; }
@keyframes intro-clip { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-lift { to { transform: translateY(-100%); visibility: hidden; } }

/* F · curtain: two halves open like doors */
.intro.curtain { background: none; animation-name: intro-gone; animation-duration: .01s; animation-delay: 2.6s; }
.intro.curtain .half { position: absolute; top: 0; bottom: 0; width: 50.5%; animation: intro-door 1s cubic-bezier(.7, 0, .2, 1) 1.6s forwards; }
.intro.curtain .half.l { left: 0; background: linear-gradient(160deg, #1F6BFF, #14B8F5); --dir: -100%; }
.intro.curtain .half.r { right: 0; background: #0B1530; --dir: 100%; }
.intro.curtain .mark { z-index: 1; animation: intro-fadeout .4s ease 1.45s forwards; }
.intro.curtain .tag { color: #fff; }
.intro.curtain ~ .after-intro { animation-delay: 1.65s; }
@keyframes intro-door { to { transform: translateX(var(--dir)); } }
@keyframes intro-fadeout { to { opacity: 0; transform: scale(.94); } }
@keyframes intro-gone { to { visibility: hidden; } }

/* G · type: a monospace line types out under a pulsing pin */
.intro.type { background: #05070D; }
.intro.type .word { width: 190px; }
.intro.type .tag { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #19E3C2; letter-spacing: .12em; text-transform: none; font-size: 16px;
  opacity: 1; width: 0; overflow: hidden; white-space: nowrap; border-right: 2px solid #19E3C2; padding-right: 2px;
  animation: intro-typing .7s steps(17) .7s forwards, intro-caret .5s step-end 4; }
.intro.type .pin { filter: drop-shadow(0 0 26px rgba(25, 227, 194, .6)); }
@keyframes intro-typing { to { width: 18.5ch; } }
@keyframes intro-caret { 50% { border-color: transparent; } }

/* H · zoom: fly through the pin into the page */
.intro.zoom { background: linear-gradient(160deg, #EEF3FF, #E7FBF5); animation-delay: 1.85s; animation-duration: .5s; }
.intro.zoom .pin { animation: intro-pin .8s cubic-bezier(.2, .9, .3, 1.25) .1s forwards, intro-through .75s cubic-bezier(.6, 0, .9, .4) 1.35s forwards; }
.intro.zoom .word, .intro.zoom .tag { animation: intro-word .6s ease .6s forwards, intro-fadeout .3s ease 1.25s forwards; }
.intro.zoom .tag { color: #1F6BFF; }
@keyframes intro-through { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(30); } }

@media (prefers-reduced-motion: reduce) {
  .intro.lift, .intro.curtain, .intro.zoom, .intro.type { animation: intro-fade .4s ease 1s forwards !important; }
  .intro.curtain { background: #0B1530; } .intro.curtain .half { display: none; }
  .intro.lift .word { clip-path: none; } .intro.type .tag { width: auto; border: 0; }
}