/* CivicPolis — first-visit intro. The torch is the experience:
   the column rises out of the dark, a spark climbs to the bowl, the flame catches and breathes,
   embers drift up, the wordmark arrives in its light — then the light floods out and becomes the page. */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
html.intro-active { overflow: hidden; }
html.intro-seen .intro { display: none !important; }
.intro { --night: #0A203E; --fx: 50vw; --fy: 40vh; position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; isolation: isolate; color: #FDF8F3;
  background: radial-gradient(120% 90% at 50% 40%, #0F2A4F 0%, var(--night) 55%, #061428 100%); }
/* warm light the flame throws onto the night */
.intro-warmth { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(42vmax 36vmax at var(--fx) var(--fy), rgba(232,170,52,.28), rgba(232,170,52,.07) 45%, transparent 70%); animation: warm 1.4s ease 1.45s forwards, breathe 3.2s ease-in-out 2.9s infinite alternate; }
.intro-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro-stage { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(18px, 3vh, 30px); text-align: center; padding: 0 24px; }

/* The torch: two layers of the brand torch — cream column, gold flame */
.torch { position: relative; height: clamp(300px, 58vh, 560px); aspect-ratio: 229 / 601; margin-bottom: -2vh; }
.torch img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.torch-column { clip-path: inset(100% 0 0 0); transform: translateY(14%); animation: column 1.1s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.torch-flame { transform-origin: 51.4% 47.9%; transform: scale(0); opacity: 0; filter: drop-shadow(0 0 0 rgba(232,170,52,0));
  animation: ignite .7s cubic-bezier(.3,1.5,.5,1) 1.45s forwards, flicker 2.6s ease-in-out 2.15s infinite, flareglow 1.8s ease-in-out 2.15s infinite alternate; }
.torch-halo { position: absolute; left: 51.4%; top: 26%; width: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255,214,128,.42) 0%, rgba(240,180,70,.22) 30%, rgba(232,170,52,.08) 58%, rgba(232,170,52,0) 100%); opacity: 0; scale: .3; animation: halo 1s ease-out 1.45s forwards, halopulse 2.4s ease-in-out 2.45s infinite alternate; }
.torch-spark { position: absolute; left: 51.4%; top: 70%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #FFF1C9; box-shadow: 0 0 12px 4px rgba(255,200,90,.9), 0 0 34px 10px rgba(232,170,52,.5); opacity: 0; animation: spark .5s cubic-bezier(.5,0,.75,0) 1.05s forwards; }
.torch-flash { position: absolute; left: 51.4%; top: 47%; width: 12%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #FFF4D6; opacity: 0; animation: flash .55s ease-out 1.45s forwards; }

/* The wordmark — the logo's own letters, reversed to cream — with a gold sheen passing through */
.intro-word { position: relative; width: min(330px, 64vw); opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.8,.2,1) 2.2s forwards; }
.intro-word img { display: block; width: 100%; height: auto; }
.intro-word::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,214,128,.95) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0;
  -webkit-mask: url("./assets/intro-wordmark.png") center / 100% 100% no-repeat; mask: url("./assets/intro-wordmark.png") center / 100% 100% no-repeat; animation: sheen 1.3s ease-in-out 2.75s forwards; }
.intro-rule { width: 0; height: 1px; background: linear-gradient(90deg, transparent, #E3A630, transparent); animation: rule .8s ease 2.85s forwards; }
.intro-tag { margin: 0; font: 500 .78rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(253,248,243,.7); opacity: 0; transform: translateY(8px); animation: rise .8s ease 3.05s forwards; }
.intro-skip { position: absolute; z-index: 2; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); font: 500 .75rem/1 Arial, Helvetica, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(253,248,243,.55); background: none; border: 1px solid rgba(253,248,243,.2); padding: 10px 14px; cursor: pointer; opacity: 0; animation: rise .6s ease 1s forwards; transition: color .2s, border-color .2s; }
.intro-skip:hover, .intro-skip:focus-visible { color: #FDF8F3; border-color: #E3A630; outline: 0; }

/* Exit: the flame's light floods outward from the flame and the page is revealed inside it */
.intro.leaving { -webkit-mask: radial-gradient(circle at var(--fx) var(--fy), transparent var(--r), #000 calc(var(--r) + 14vmax)); mask: radial-gradient(circle at var(--fx) var(--fy), transparent var(--r), #000 calc(var(--r) + 14vmax)); animation: flood 1.05s cubic-bezier(.55,0,.2,1) forwards; }
.intro-done .hero-copy > * { animation: heroin .8s cubic-bezier(.2,.8,.2,1) both; }
.intro-done .hero-copy > :nth-child(1) { animation-delay: .3s; } .intro-done .hero-copy > :nth-child(2) { animation-delay: .4s; }
.intro-done .hero-copy > :nth-child(3) { animation-delay: .55s; } .intro-done .hero-copy > :nth-child(4) { animation-delay: .65s; } .intro-done .hero-copy > :nth-child(5) { animation-delay: .75s; }
.intro-done .header { animation: heroin .8s ease .25s both; }
.intro-done .floating-card { animation-name: cardin, card-drift; animation-duration: .9s, 6.5s; animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-fill-mode: both, none; }
.intro-done .float-bills { animation-delay: .5s, .35s; } .intro-done .float-officials { animation-delay: .65s, -2.8s; } .intro-done .float-views { animation-delay: .8s, -4.1s; }

@keyframes column { to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes spark { 0% { opacity: 0; top: 74%; } 20% { opacity: 1; } 100% { opacity: 1; top: 47%; } }
@keyframes flash { 0% { opacity: .95; scale: .4; } 100% { opacity: 0; scale: 5; } }
@keyframes ignite { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12, 1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  18% { transform: scale(1.02, 1.05) skewX(-1.6deg); }
  37% { transform: scale(.985, 1.015) skewX(1.2deg); }
  55% { transform: scale(1.025, 1.07) skewX(-.8deg); }
  74% { transform: scale(.99, 1.02) skewX(1.8deg); }
}
@keyframes flareglow { from { filter: drop-shadow(0 0 10px rgba(255,190,80,.45)); } to { filter: drop-shadow(0 0 26px rgba(255,190,80,.75)); } }
@keyframes halo { to { opacity: 1; scale: 1; } }
@keyframes halopulse { from { scale: .94; opacity: .85; } to { scale: 1.06; opacity: 1; } }
@keyframes warm { to { opacity: 1; } }
@keyframes breathe { from { filter: brightness(.9); } to { filter: brightness(1.15); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes sheen { to { background-position: -30% 0; } }
@keyframes rule { to { width: min(280px, 62vw); } }
@keyframes flood { from { --r: 0px; } to { --r: 160vmax; } }
@keyframes heroin { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cardin { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } html.intro-active { overflow: auto; } }