/* ===================================================== First-visit logo intro */
.intro { display: none; }
html.intro-on body { overflow: hidden; }
html.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: auto; }
.intro-curtain { position: absolute; left: 0; right: 0; height: 50.5%; background: #0D0D0F; transition: transform .9s cubic-bezier(.77, 0, .18, 1); }
.intro-curtain-top { top: 0; background: radial-gradient(900px 420px at 50% 100%, #1d0f11, #0D0D0F 70%); }
.intro-curtain-bottom { bottom: 0; background: radial-gradient(900px 420px at 50% 0%, #1d0f11, #0D0D0F 70%); }
.intro-stage { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; }
.intro-logo { width: min(620px, 82vw); height: auto; overflow: visible; transform-origin: 0 0; will-change: transform; }
.intro-rule { width: min(620px, 82vw); height: 1px; background: linear-gradient(90deg, transparent, #B8903A, transparent); transform: scaleX(0); animation: introRule .9s 1.55s cubic-bezier(.2, .7, .2, 1) forwards; }

/* 1) outline draw  2) fill + settle */
.ig { fill: #EE2529; fill-opacity: 0; stroke: #EE2529; stroke-width: 2.2; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transform: translateY(14px); transform-box: fill-box;
  animation: introDraw 1s calc(var(--i) * .1s + .15s) cubic-bezier(.65, 0, .35, 1) forwards,
             introFill .55s calc(var(--i) * .07s + 1.05s) cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFill { to { fill-opacity: 1; stroke-opacity: 0; transform: translateY(0); } }

/* 3) "എന്റെ" pops, tagline sweeps in, light glint across the letters */
.ig-ente { fill: #EE2529; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.2) rotate(-12deg); opacity: 0;
  animation: introPop .6s 1.45s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes introPop { to { transform: none; opacity: 1; } }
.ig-tag { fill: #f2efe9; clip-path: inset(0 100% 0 0); animation: introWipe .8s 1.7s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes introWipe { to { clip-path: inset(0 0 0 0); } }
.ig-shine { animation: introShine 1.1s 1.9s ease-in-out forwards; }
@keyframes introShine { to { transform: translateX(1300px); } }
@keyframes introRule { to { transform: scaleX(1); } }

.intro-skip { position: absolute; right: 22px; bottom: 20px; background: none; border: 1px solid #333; color: #9a958d; border-radius: 999px; padding: 7px 16px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: introRule .4s .8s forwards; transform: none; }
.intro-skip:hover { color: #fff; border-color: #777; }

/* 4) exit: curtains part, logo flies into the masthead (JS sets the transform) */
.intro.leaving { pointer-events: none; }
.intro.leaving .intro-curtain-top { transform: translateY(-101%); }
.intro.leaving .intro-curtain-bottom { transform: translateY(101%); }
.intro.leaving .intro-rule, .intro.leaving .intro-skip { opacity: 0; transition: opacity .3s; }
.intro.leaving .ig-tag { fill: #EE2529; transition: fill .6s; }
.intro.leaving .intro-logo { transition: transform .9s cubic-bezier(.77, 0, .18, 1), opacity .25s .75s; }
html.intro-on .masthead .brand img { opacity: 0; }
html.intro-finished .masthead .brand img { opacity: 1; transition: opacity .2s; }
/* Quick version (~1s) for every page after the first in a session */
html.intro-quick .ig { stroke: none; stroke-dashoffset: 0; animation: introQuick .42s calc(var(--i) * .03s) cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes introQuick { to { fill-opacity: 1; transform: translateY(0); } }
html.intro-quick .ig-ente { animation-duration: .35s; animation-delay: .18s; }
html.intro-quick .ig-tag { animation-duration: .35s; animation-delay: .2s; }
html.intro-quick .ig-shine, html.intro-quick .intro-skip { display: none; }
html.intro-quick .intro-rule { animation-duration: .35s; animation-delay: .1s; }
html.intro-quick .intro-curtain { transition-duration: .6s; }
html.intro-quick .intro.leaving .intro-logo { transition: transform .6s cubic-bezier(.77, 0, .18, 1), opacity .2s .45s; }
@media (prefers-reduced-motion: reduce) { html.intro-on .intro { display: none; } }