/* After Normal: homepage hero. Colourful illustrated scene that changes on its own. Pausable. Responsive. */
@property --sky-top      { syntax: '<color>'; inherits: true; initial-value: #27407a; }
@property --sky-bottom   { syntax: '<color>'; inherits: true; initial-value: #8ec5e8; }
@property --wash         { syntax: '<color>'; inherits: true; initial-value: rgba(120, 70, 200, 0.18); }
@property --bldg         { syntax: '<color>'; inherits: true; initial-value: #1d2650; }
@property --far          { syntax: '<color>'; inherits: true; initial-value: #6a7fc0; }
@property --roadc        { syntax: '<color>'; inherits: true; initial-value: #2b2f4a; }
@property --accent-scene { syntax: '<color>'; inherits: true; initial-value: #6EC1FF; }

.hero {
  --scene-h: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(540px, 82vh, 740px);
  background: #1B1B19;
  color: #F8F3E6;
  border-bottom: 4px solid #1B1B19;
  transition: --sky-top 2s ease, --sky-bottom 2s ease, --wash 2s ease, --bldg 2s ease, --far 2s ease, --roadc 2s ease, --accent-scene 2s ease;
}
.hero[data-scene="storm"]    { --sky-top: #27407a; --sky-bottom: #8ec5e8; --wash: rgba(120, 70, 200, 0.18); --bldg: #1d2650; --far: #6a7fc0; --roadc: #2b2f4a; --accent-scene: #6EC1FF; }
.hero[data-scene="flood"]    { --sky-top: #0f7a96; --sky-bottom: #ffd9a6; --wash: rgba(255, 150, 90, 0.10); --bldg: #12455a; --far: #4fa3b8; --roadc: #27414f; --accent-scene: #34D1BF; }
.hero[data-scene="fire"]     { --sky-top: #5b1b57; --sky-bottom: #ff9a3c; --wash: rgba(255, 80, 40, 0.14); --bldg: #2a0e2e; --far: #b8486a; --roadc: #2c1626; --accent-scene: #FFB347; }
.hero[data-scene="blackout"] { --sky-top: #0a0f33; --sky-bottom: #6a58b0; --wash: rgba(60, 40, 140, 0.14); --bldg: #0a0d26; --far: #3a3f85; --roadc: #14172e; --accent-scene: #B7A6FF; }
.hero[data-scene="winter"]   { --sky-top: #4f9ad0; --sky-bottom: #fbe3ee; --wash: rgba(180, 220, 255, 0.16); --bldg: #35577a; --far: #8fb6d6; --roadc: #3c4a5e; --accent-scene: #9FE0FF; }
.hero[data-scene="quake"]    { --sky-top: #b9532b; --sky-bottom: #f7cf6a; --wash: rgba(255, 190, 90, 0.12); --bldg: #4e2616; --far: #d0834a; --roadc: #3a2a24; --accent-scene: #FFD166; }

.hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.hero .grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.10; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hero .shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%), radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.20) 100%); }

/* ------- content ------- */
.hero-inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 0 1rem 1.4rem; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.9rem; }
.hero-slab { background: #1B1B19; color: #F8F3E6; padding: 1.1rem 1.3rem 1.3rem; max-width: 34rem; border-left: 10px solid var(--accent-scene); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.hero-kicker { font-family: var(--font-head); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 0.95rem; color: var(--accent-scene); margin: 0 0 0.2rem; }
.hero-slab h1 { font-size: clamp(2.8rem, 8vw, 4.8rem); line-height: 0.95; margin: 0; color: #F8F3E6; }
.hero-slab h1 span { color: #FF6B5E; }
.hero-tag { font-family: var(--font-head); font-stretch: condensed; text-transform: uppercase; font-weight: 700; font-size: 1.25rem; margin: 0.6rem 0 0; }
.hero-sub { margin: 0.5rem 0 0; font-size: 1.02rem; }
.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
.hero .btn { background: #F8F3E6; color: #1B1B19; border-color: #F8F3E6; }
.hero .btn:hover { background: #fff; }
.hero .btn.primary { background: #D32F2F; border-color: #D32F2F; color: #FFFFFF; }
.hero .btn.primary:hover { background: #C62828; border-color: #C62828; filter: none; } /* the hero uses its own red because --accent is too dark on the charcoal slab */

.hero-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.hero-caption { margin: 0; font-family: var(--font-head); font-stretch: condensed; text-transform: uppercase; font-weight: 800; letter-spacing: 0.04em; background: var(--accent-scene); color: #14110d; padding: 0.3rem 0.8rem; border: 2px solid #14110d; }
.hero-pause { appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; color: #1B1B19; background: rgba(248, 243, 230, 0.94); border: 2px solid #1B1B19; border-radius: 999px; padding: 0.3rem 0.85rem; min-height: 2.4rem; }
.hero-pause:hover { background: #fff; }
.hero :focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #1B1B19; }

/* ------- scene art ------- */
.pan { transform-origin: 50% 72%; animation: pan 28s ease-in-out infinite alternate; }
@keyframes pan { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-16px); } }

.scene .far-b { fill: var(--far); opacity: 0.55; }
.scene .bldg { fill: var(--bldg); opacity: 0.96; }
.scene .road { fill: var(--roadc); }
.scene .fx { opacity: 0; transition: opacity 1.8s ease; }
.hero[data-scene="storm"] .fx-storm, .hero[data-scene="flood"] .fx-flood, .hero[data-scene="fire"] .fx-fire,
.hero[data-scene="blackout"] .fx-blackout, .hero[data-scene="winter"] .fx-winter, .hero[data-scene="quake"] .fx-quake { opacity: 1; }
.hero[data-scene="flood"] .fx-sun, .hero[data-scene="winter"] .fx-sun, .hero[data-scene="quake"] .fx-sun { opacity: 1; }

.scene .win-g { fill: #ffd277; opacity: 0.0; transition: opacity 1.4s ease; }
.hero[data-scene="storm"] .win-g, .hero[data-scene="flood"] .win-g, .hero[data-scene="quake"] .win-g { opacity: 0.45; }
.hero[data-scene="fire"] .win-g { opacity: 0.6; }
.hero[data-scene="winter"] .win-g { opacity: 0.8; }
.hero[data-scene="blackout"] .win-g { opacity: 1; animation: lightsOut 5s ease-in forwards; }
.hero[data-scene="blackout"] .win-g:nth-child(1) { animation-delay: 0.8s; }
.hero[data-scene="blackout"] .win-g:nth-child(2) { animation-delay: 1.6s; }
.hero[data-scene="blackout"] .win-g:nth-child(3) { animation-delay: 2.4s; }
.hero[data-scene="blackout"] .win-g:nth-child(4) { animation-delay: 3.2s; }
.hero[data-scene="blackout"] .win-g:nth-child(5) { animation-delay: 3.9s; }
@keyframes lightsOut { 0% { opacity: 1; } 8% { opacity: 0.5; } 14% { opacity: 1; } 22% { opacity: 0.0; } 100% { opacity: 0.0; } }

.rain line { stroke: #e8f6ff; stroke-width: 1.7; opacity: 0.6; animation: rainfall linear infinite; }
@keyframes rainfall { from { transform: translate(60px, -120px); } to { transform: translate(-60px, 820px); } }
.bolt { opacity: 0; animation: bolt 8s linear infinite; }
.flash { opacity: 0; fill: #fff7d6; animation: flash 8s linear infinite; }
@keyframes bolt  { 0%, 55%, 62%, 100% { opacity: 0; } 56%, 58% { opacity: 1; } 59% { opacity: 0; } 60% { opacity: 0.8; } }
@keyframes flash { 0%, 55%, 62%, 100% { opacity: 0; } 56% { opacity: 0.28; } 57% { opacity: 0; } 58% { opacity: 0.18; } 59% { opacity: 0; } }
.cloud { animation: drift 40s linear infinite alternate; }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }

.hero[data-scene="flood"] .water-front { animation: rise 6s ease-out forwards; }
.hero[data-scene="flood"] .water-back  { animation: rise 7s ease-out forwards; }
@keyframes rise { from { transform: translateY(170px); } to { transform: translateY(0); } }
.wave { animation: wave 5s linear infinite; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-200px); } }

.glow { animation: flicker 2.4s ease-in-out infinite alternate; }
@keyframes flicker { from { opacity: 0.8; } to { opacity: 1; } }
.ember { fill: #ffd166; animation: ember linear infinite; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(40px, -520px); opacity: 0; } }
.smoke { fill: #5a2a48; opacity: 0.35; animation: smoke 18s ease-in-out infinite alternate; }
@keyframes smoke { from { transform: translate(-40px, 20px) scale(1); } to { transform: translate(60px, -30px) scale(1.15); } }

.star { fill: #fff; animation: twinkle 3.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }

.snow circle { fill: #fff; animation: snowfall linear infinite; }
@keyframes snowfall { from { transform: translate(0, -40px); } to { transform: translate(40px, 760px); } }

.hero[data-scene="quake"] .mid-layer { animation: quake 0.45s linear 6; }
.hero[data-scene="quake"] .poles { animation: quake 0.45s linear 6; }
@keyframes quake { 0% { transform: translate(0, 0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-3px, 1px); } 100% { transform: translate(0, 0); } }
.crack { stroke: #1B1B19; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.hero[data-scene="quake"] .crack { animation: crack 1.4s ease-out 0.4s forwards; }
@keyframes crack { to { stroke-dashoffset: 0; } }
.dust { fill: #f3d28b; opacity: 0; }
.hero[data-scene="quake"] .dust { animation: dust 3.6s ease-out forwards; }
@keyframes dust { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.6) translateY(-30px); } }

/* paused, off-screen and reduced-motion */
.hero[data-paused="true"] .scene *, .hero[data-offscreen="true"] .scene * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hero .scene *, .hero { animation: none !important; transition: none !important; }
}

/* optional real video, layered over the illustration when present */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity 1s ease; }
.hero-video.ready { opacity: 1; }

/* ------- responsive ------- */
/* Phones: picture on top, text underneath, so the text never hides the art. */
@media (max-width: 42rem) {
  .hero { --scene-h: clamp(250px, 74vw, 430px); min-height: 0; }
  .hero .scene, .hero .grain, .hero .shade { height: var(--scene-h); bottom: auto; }
  .hero-inner { padding: var(--scene-h) 0 1.2rem; min-height: 0; justify-content: flex-start; gap: 0.8rem; }
  .hero-slab { max-width: none; box-shadow: none; border-left-width: 8px; padding: 1rem 1rem 1.2rem; }
  .hero-bar { position: absolute; left: 0.8rem; right: 0.8rem; top: 0.7rem; height: calc(var(--scene-h) - 1.4rem); flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; pointer-events: none; }
  .hero-bar > * { pointer-events: auto; }
  .hero-caption { font-size: 0.85rem; padding: 0.2rem 0.6rem; max-width: 100%; }
  .hero-pause { min-height: 2.2rem; padding: 0.15rem 0.75rem; font-size: 0.8rem; }
  .hero-cta .btn { flex: 1 1 100%; }
}
/* Tablets and small laptops */
@media (min-width: 42.01rem) and (max-width: 64rem) {
  .hero { min-height: clamp(520px, 74vh, 680px); }
  .hero-slab { max-width: 30rem; }
}
/* Large screens */
@media (min-width: 90rem) {
  .hero { min-height: clamp(600px, 78vh, 820px); }
  .hero-slab { max-width: 38rem; }
  .hero-slab h1 { font-size: 5.4rem; }
}
/* Short landscape screens */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero-inner { padding-top: 6rem; }
}

/* when real footage is playing the illustration steps aside */
.hero .scene { transition: opacity 1.2s ease; }
.hero.has-video .scene { opacity: 0; }
.hero[data-scene="tornado"] { --accent-scene: #A8DB6E; }