/* FERG ARCADE — seasonal passkey gate
   Four seasons loop and cross-fade behind a glass passkey card.
   Pure CSS seasonal transitions + lightweight JS mouse parallax.
*/

:root{
  --gate-ink:#e8eaf2;
  --gate-dim:#9aa3c7;
  --gate-card:rgba(18,22,42,.78);
  --gate-card-border:rgba(255,255,255,.12);
  --gate-zone:#ffc857;
  --gate-dot:#ff5964;
  --gate-err:#ff5964;
  --mx:0px;
  --my:0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  min-height:100vh;
  overflow:hidden;
  background:#0a0d1a;
  color:var(--gate-ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- season canvases ---------- */
.gate{
  position:fixed;inset:0;z-index:0;
  perspective:1200px;
  overflow:hidden;
}
.season{
  position:absolute;inset:0;
  opacity:0;
  animation:seasonCycle 20s linear infinite;
  will-change:opacity;
  pointer-events:none;
}
.season::before,
.season::after{
  content:'';position:absolute;inset:0;
  background-size:cover;background-position:center bottom;
  transform:translate3d(calc(var(--mx)*-1), calc(var(--my)*-1), 0);
  will-change:transform;
}

/* spring */
.season-spring{
  background:linear-gradient(180deg,#87CEEB 0%,#b8e6d3 55%,#d4f0d0 100%);
  animation-delay:0s;
}
.season-spring::before{
  background:
    radial-gradient(ellipse 120% 50% at 20% 100%, rgba(120,190,120,.35) 0%, transparent 60%),
    radial-gradient(ellipse 140% 60% at 85% 100%, rgba(255,183,197,.35) 0%, transparent 55%);
}
.season-spring::after{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0%, transparent 28%),
    linear-gradient(180deg,transparent 60%,rgba(86,160,110,.25) 100%);
}

/* summer */
.season-summer{
  background:linear-gradient(180deg,#4facfe 0%,#00f2fe 45%,#7fe786 100%);
  animation-delay:-5s;
}
.season-summer::before{
  background:
    radial-gradient(circle at 80% 14%, rgba(255,220,90,.55) 0%, rgba(255,180,60,.18) 28%, transparent 46%),
    radial-gradient(ellipse 130% 55% at 30% 100%, rgba(60,180,100,.35) 0%, transparent 60%);
}
.season-summer::after{
  background:
    linear-gradient(180deg,transparent 50%,rgba(34,130,80,.22) 100%),
    radial-gradient(ellipse 90% 40% at 70% 100%, rgba(255,255,220,.18) 0%, transparent 50%);
}

/* autumn */
.season-autumn{
  background:linear-gradient(180deg,#6b4c7f 0%,#c15c3f 40%,#e89b50 100%);
  animation-delay:-10s;
}
.season-autumn::before{
  background:
    radial-gradient(ellipse 130% 60% at 15% 100%, rgba(140,70,40,.45) 0%, transparent 55%),
    radial-gradient(ellipse 120% 55% at 90% 100%, rgba(190,100,50,.4) 0%, transparent 55%),
    linear-gradient(180deg,transparent 35%,rgba(120,50,30,.25) 100%);
}
.season-autumn::after{
  background:
    radial-gradient(circle at 75% 18%, rgba(255,210,130,.35) 0%, transparent 26%),
    linear-gradient(180deg,transparent 55%,rgba(90,40,25,.28) 100%);
}

/* winter */
.season-winter{
  background:linear-gradient(180deg,#1b263b 0%,#3d5a80 40%,#98c1d9 100%);
  animation-delay:-15s;
}
.season-winter::before{
  background:
    radial-gradient(circle at 22% 16%, rgba(230,245,255,.5) 0%, transparent 22%),
    radial-gradient(ellipse 140% 60% at 50% 100%, rgba(200,220,240,.25) 0%, transparent 60%),
    linear-gradient(180deg,transparent 45%,rgba(70,100,140,.25) 100%);
}
.season-winter::after{
  background:
    radial-gradient(ellipse 100% 45% at 80% 100%, rgba(255,255,255,.15) 0%, transparent 50%),
    linear-gradient(180deg,transparent 62%,rgba(60,90,130,.22) 100%);
}

/* hell */
.season-hell{
  background:linear-gradient(180deg,#0a0000 0%,#2a0505 35%,#6b0f00 70%,#8b1500 100%);
  opacity:0;
  z-index:3;
}
.season-hell::before{
  background:
    radial-gradient(ellipse 160% 80% at 50% 100%, rgba(220,30,0,.7) 0%, transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(255,100,0,.45) 0%, transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(255,80,0,.4) 0%, transparent 26%),
    radial-gradient(circle at 50% 95%, rgba(255,160,40,.35) 0%, transparent 35%),
    linear-gradient(180deg,transparent 35%,rgba(100,10,0,.55) 100%);
}
.season-hell::after{
  background:
    radial-gradient(circle at 50% 22%, rgba(255,50,20,.25) 0%, transparent 35%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255,80,0,.15) 0%, transparent 50%),
    repeating-linear-gradient(180deg, transparent 0, transparent 14px, rgba(255,60,0,.06) 14px, rgba(255,60,0,.06) 16px);
}
.season-hell .hills path{fill:#1f0505}
.season-hell .orb{
  width:120px;height:120px;
  background:radial-gradient(circle at 35% 35%,#ff5a2a 0%,#8b0000 40%,rgba(139,0,0,0) 70%);
  top:10%;right:14%;left:auto;opacity:.9;
}
.season-hell .particle{
  background:radial-gradient(circle, #ff8c42 0%, rgba(255,60,0,0) 70%);
  box-shadow:0 0 8px rgba(255,90,0,.6);
  border-radius:50%;
}
.season-hell .p1{width:8px;height:8px;left:10%;top:110%;animation:emberUp1 3.2s linear infinite}
.season-hell .p2{width:5px;height:5px;left:20%;top:110%;animation:emberUp2 2.8s linear infinite .4s}
.season-hell .p3{width:10px;height:10px;left:30%;top:110%;animation:emberUp1 3.6s linear infinite .9s}
.season-hell .p4{width:4px;height:4px;left:40%;top:110%;animation:emberUp2 2.5s linear infinite 1.3s}
.season-hell .p5{width:7px;height:7px;left:50%;top:110%;animation:emberUp1 3s linear infinite .2s}
.season-hell .p6{width:5px;height:5px;left:60%;top:110%;animation:emberUp2 3.4s linear infinite 1.8s}
.season-hell .p7{width:9px;height:9px;left:72%;top:110%;animation:emberUp1 2.9s linear infinite .7s}
.season-hell .p8{width:6px;height:6px;left:84%;top:110%;animation:emberUp2 3.3s linear infinite 2.2s}
.season-hell .p9{width:4px;height:4px;left:94%;top:110%;animation:emberUp1 2.6s linear infinite 1.1s}
@keyframes emberUp1{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  8%{opacity:1}
  100%{transform:translateY(-140vh) rotate(180deg) translateX(45px);opacity:0}
}
@keyframes emberUp2{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(-140vh) rotate(-220deg) translateX(-40px);opacity:0}
}

/* heaven */
.season-heaven{
  background:linear-gradient(180deg,#1e3a5f 0%,#4facfe 35%,#ffe6a0 100%);
  opacity:0;
  z-index:3;
}
.season-heaven::before{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,240,180,.7) 0%, rgba(255,220,120,.25) 28%, transparent 50%),
    radial-gradient(ellipse 130% 55% at 25% 100%, rgba(255,255,255,.25) 0%, transparent 55%),
    radial-gradient(ellipse 120% 50% at 80% 100%, rgba(200,245,255,.22) 0%, transparent 55%),
    linear-gradient(180deg,transparent 40%,rgba(120,200,255,.18) 100%);
}
.season-heaven::after{
  background:
    repeating-conic-gradient(from 0deg at 50% 18%, rgba(255,255,255,.06) 0deg 8deg, transparent 8deg 24deg),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.15) 0%, transparent 30%);
}
.season-heaven .hills path{fill:#5a9fd4}
.season-heaven .orb{
  width:130px;height:130px;
  background:radial-gradient(circle at 35% 35%,#fff 0%,#ffe066 30%,rgba(255,224,102,0) 68%);
  top:8%;left:50%;opacity:.95;
  transform:translateX(-50%) translate3d(calc(var(--mx)*-1.5), calc(var(--my)*-1.5), 0);
}
.season-heaven .particle{
  background:radial-gradient(circle, #fff 0%, rgba(255,255,220,0) 70%);
  box-shadow:0 0 8px rgba(255,255,255,.55);
}
.season-heaven .p1{width:6px;height:6px;left:12%;top:110%;animation:sparkleUp1 6s linear infinite}
.season-heaven .p2{width:4px;height:4px;left:26%;top:110%;animation:sparkleUp2 5s linear infinite 1.2s}
.season-heaven .p3{width:7px;height:7px;left:40%;top:110%;animation:sparkleUp1 5.5s linear infinite 2.4s}
.season-heaven .p4{width:5px;height:5px;left:58%;top:110%;animation:sparkleUp2 6.2s linear infinite .8s}
.season-heaven .p5{width:6px;height:6px;left:74%;top:110%;animation:sparkleUp1 5.3s linear infinite 3.1s}
.season-heaven .p6{width:4px;height:4px;left:88%;top:110%;animation:sparkleUp2 5.8s linear infinite 1.9s}
@keyframes sparkleUp1{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.9}
  100%{transform:translateY(-130vh) translateX(40px);opacity:0}
}
@keyframes sparkleUp2{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.85}
  100%{transform:translateY(-130vh) translateX(-35px);opacity:0}
}

@keyframes seasonCycle{
  0%{opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{opacity:0}
}

/* midground hills for each season */
.hills{
  position:absolute;left:-10%;right:-10%;bottom:-5%;height:42%;
  transform:translate3d(calc(var(--mx)*-2), calc(var(--my)*-2), 0);
  will-change:transform;
  opacity:.9;
}
.hills svg{width:100%;height:100%;display:block}
.season-spring .hills path{fill:#4a9b6a}
.season-summer .hills path{fill:#2e8b57}
.season-autumn .hills path{fill:#8b4513}
.season-winter .hills path{fill:#2c4a66}

/* foreground particle layers */
.particles{
  position:absolute;inset:-20%;
  transform:translate3d(calc(var(--mx)*-3), calc(var(--my)*-3), 0);
  will-change:transform;
  pointer-events:none;
}
.particle{
  position:absolute;border-radius:50%;
  opacity:.75;
}

/* spring petals */
.season-spring .particle{
  background:radial-gradient(circle at 30% 30%, #ffd1dc, #ff9eb5);
  box-shadow:0 0 4px rgba(255,180,200,.4);
}
.season-spring .p1{width:10px;height:10px;left:12%;top:110%;animation:petalFall1 9s linear infinite}
.season-spring .p2{width:8px;height:8px;left:28%;top:110%;animation:petalFall2 11s linear infinite 1.2s}
.season-spring .p3{width:12px;height:12px;left:48%;top:110%;animation:petalFall3 10s linear infinite 2.5s}
.season-spring .p4{width:9px;height:9px;left:68%;top:110%;animation:petalFall1 12s linear infinite .7s}
.season-spring .p5{width:7px;height:7px;left:85%;top:110%;animation:petalFall2 8.5s linear infinite 3.3s}
.season-spring .p6{width:11px;height:11px;left:38%;top:110%;animation:petalFall3 9.5s linear infinite 4.1s}

@keyframes petalFall1{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  8%{opacity:.85}
  100%{transform:translateY(-130vh) rotate(760deg) translateX(40px);opacity:0}
}
@keyframes petalFall2{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  10%{opacity:.8}
  100%{transform:translateY(-130vh) rotate(-640deg) translateX(-60px);opacity:0}
}
@keyframes petalFall3{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  6%{opacity:.9}
  100%{transform:translateY(-130vh) rotate(520deg) translateX(30px);opacity:0}
}

/* summer pollen / dandelion */
.season-summer .particle{
  background:radial-gradient(circle, #fff9c4 0%, rgba(255,255,200,0) 70%);
  box-shadow:0 0 6px rgba(255,255,200,.45);
}
.season-summer .p1{width:6px;height:6px;left:15%;top:110%;animation:floatUp1 14s linear infinite}
.season-summer .p2{width:5px;height:5px;left:35%;top:110%;animation:floatUp2 16s linear infinite 2s}
.season-summer .p3{width:7px;height:7px;left:55%;top:110%;animation:floatUp1 13s linear infinite 4s}
.season-summer .p4{width:4px;height:4px;left:75%;top:110%;animation:floatUp2 15s linear infinite 1s}
.season-summer .p5{width:6px;height:6px;left:22%;top:110%;animation:floatUp1 17s linear infinite 5.5s}
.season-summer .p6{width:5px;height:5px;left:88%;top:110%;animation:floatUp2 12s linear infinite 3s}

@keyframes floatUp1{
  0%{transform:translateY(0) translateX(0);opacity:0}
  5%{opacity:.8}
  100%{transform:translateY(-130vh) translateX(50px);opacity:0}
}
@keyframes floatUp2{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.75}
  100%{transform:translateY(-130vh) translateX(-40px);opacity:0}
}

/* autumn leaves */
.season-autumn .particle{
  background:linear-gradient(135deg, #d35400, #e67e22);
  border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;
}
.season-autumn .p1{width:14px;height:10px;left:10%;top:110%;animation:leafFall1 8s linear infinite}
.season-autumn .p2{width:12px;height:9px;left:26%;top:110%;animation:leafFall2 9.5s linear infinite 1.4s}
.season-autumn .p3{width:16px;height:11px;left:44%;top:110%;animation:leafFall1 10s linear infinite 2.8s}
.season-autumn .p4{width:13px;height:9px;left:62%;top:110%;animation:leafFall2 8.5s linear infinite .6s}
.season-autumn .p5{width:15px;height:10px;left:78%;top:110%;animation:leafFall1 9s linear infinite 3.9s}
.season-autumn .p6{width:11px;height:8px;left:91%;top:110%;animation:leafFall2 11s linear infinite 2.1s}

@keyframes leafFall1{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(-130vh) rotate(1080deg) translateX(120px);opacity:0}
}
@keyframes leafFall2{
  0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:0}
  12%{opacity:.85}
  100%{transform:translateY(-130vh) rotate(-920deg) translateX(-100px);opacity:0}
}

/* winter snow */
.season-winter .particle{
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.6) 100%);
  box-shadow:0 0 5px rgba(255,255,255,.4);
}
.season-winter .p1{width:7px;height:7px;left:8%;top:110%;animation:snowFall1 10s linear infinite}
.season-winter .p2{width:5px;height:5px;left:20%;top:110%;animation:snowFall2 12s linear infinite 1s}
.season-winter .p3{width:8px;height:8px;left:36%;top:110%;animation:snowFall1 9s linear infinite 2.2s}
.season-winter .p4{width:4px;height:4px;left:52%;top:110%;animation:snowFall2 11s linear infinite 3.4s}
.season-winter .p5{width:6px;height:6px;left:68%;top:110%;animation:snowFall1 13s linear infinite .8s}
.season-winter .p6{width:5px;height:5px;left:84%;top:110%;animation:snowFall2 10s linear infinite 4.5s}
.season-winter .p7{width:7px;height:7px;left:94%;top:110%;animation:snowFall1 11.5s linear infinite 2.7s}

@keyframes snowFall1{
  0%{transform:translateY(0) translateX(0);opacity:0}
  6%{opacity:.9}
  100%{transform:translateY(-130vh) translateX(30px);opacity:0}
}
@keyframes snowFall2{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.8}
  100%{transform:translateY(-130vh) translateX(-25px);opacity:0}
}

/* sun/moon orbs per season */
.orb{
  position:absolute;border-radius:50%;
  transform:translate3d(calc(var(--mx)*-1.5), calc(var(--my)*-1.5), 0);
  will-change:transform;
}
.season-spring .orb{width:90px;height:90px;background:radial-gradient(circle at 35% 35%,#fff 0%,#ffd1dc 35%,rgba(255,209,220,0) 70%);top:12%;left:18%;opacity:.85}
.season-summer .orb{width:120px;height:120px;background:radial-gradient(circle at 35% 35%,#fff 0%,#ffe066 30%,rgba(255,224,102,0) 68%);top:10%;right:16%;opacity:.95}
.season-autumn .orb{width:100px;height:100px;background:radial-gradient(circle at 35% 35%,#fff5e6 0%,#ffb366 35%,rgba(255,179,102,0) 70%);top:14%;right:22%;opacity:.8}
.season-winter .orb{width:80px;height:80px;background:radial-gradient(circle at 35% 35%,#fff 0%,#d6eaff 40%,rgba(214,234,255,0) 70%);top:13%;left:20%;opacity:.9}

/* ---------- passkey card ---------- */
.gate-card{
  position:relative;z-index:10;
  width:min(92vw,420px);
  padding:44px 36px 40px;
  text-align:center;
  background:var(--gate-card);
  border:1px solid var(--gate-card-border);
  border-radius:28px;
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  animation:cardIn .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(28px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.gate-logo{
  font-family:'Bungee',cursive;
  font-size:clamp(26px,7vw,38px);
  letter-spacing:.04em;
  color:var(--gate-ink);
  margin-bottom:6px;
  line-height:1.1;
}
.gate-logo span{color:var(--gate-zone)}

.gate-sub{
  color:var(--gate-dim);
  font-size:13px;
  line-height:1.5;
  margin-bottom:28px;
}

.gate-form{
  display:flex;flex-direction:column;gap:14px;
}
.gate-input{
  width:100%;
  background:rgba(10,13,26,.65);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 16px;
  color:var(--gate-ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16px;
  text-align:center;
  letter-spacing:.08em;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.gate-input::placeholder{color:#5a6285;letter-spacing:.04em}
.gate-input:focus{
  border-color:var(--gate-zone);
  background:rgba(10,13,26,.85);
  box-shadow:0 0 0 3px rgba(255,200,87,.12);
}

.gate-btn{
  width:100%;
  background:var(--gate-zone);
  color:#241c00;
  border:0;
  border-radius:999px;
  padding:14px 24px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s,filter .15s,box-shadow .15s;
  box-shadow:0 8px 24px rgba(255,200,87,.22);
}
.gate-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.gate-btn:active{transform:translateY(0)}

.gate-err{
  color:var(--gate-err);
  font-size:13px;
  margin-top:12px;
  min-height:20px;
  animation:shakeErr .35s ease-in-out;
}
@keyframes shakeErr{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(3px)}
}

/* ---------- transient heaven/hell states ---------- */
.season-hell,.season-heaven{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  z-index:3;
  animation:none;
}

/* hell: dramatic inferno flash with lightning, then settle back to seasons.
   --hell-duration is injected via inline style and escalates with each failure. */
body.state-hell{
  --hell-duration:3.5s;
}
body.state-hell .season-hell{
  animation:hellFlash var(--hell-duration) cubic-bezier(.45,0,.55,1) forwards;
}
@keyframes hellFlash{
  0%{opacity:0}
  8%{opacity:1}
  82%{opacity:1}
  100%{opacity:0}
}
body.state-hell .gate::after{
  content:'';position:absolute;inset:0;z-index:4;
  background:radial-gradient(circle at 50% 50%, rgba(255,0,0,0) 0%, rgba(60,0,0,.55) 100%);
  opacity:0;
  animation:hellVignette var(--hell-duration) ease-in-out forwards;
  pointer-events:none;
}
@keyframes hellVignette{
  0%{opacity:0}
  10%{opacity:.9}
  80%{opacity:.85}
  100%{opacity:0}
}
body.state-hell .gate::before{
  content:'';position:absolute;inset:0;z-index:5;
  background:rgba(255,255,255,.75);
  opacity:0;
  animation:hellLightning var(--hell-duration) ease-in-out forwards;
  pointer-events:none;
  mix-blend-mode:overlay;
}
@keyframes hellLightning{
  0%,6%{opacity:0}
  7%{opacity:.9}
  8%,14%{opacity:0}
  15%{opacity:.7}
  16%,22%{opacity:0}
  23%{opacity:.85}
  24%{opacity:0}
  30%{opacity:.5}
  31%,100%{opacity:0}
}

/* escalating hell levels */
.hell-level-2{--hell-duration:4s}
.hell-level-3{--hell-duration:4.6s}
.hell-level-4{--hell-duration:5.3s}
.hell-level-5{--hell-duration:6s}

.hell-level-2 .gate::after{
  background:radial-gradient(circle at 50% 50%, rgba(255,0,0,0) 0%, rgba(80,0,0,.7) 100%);
}
.hell-level-3 .gate::after{
  background:radial-gradient(circle at 50% 50%, rgba(255,0,0,0) 0%, rgba(100,0,0,.8) 100%);
}
.hell-level-4 .gate::after,
.hell-level-5 .gate::after{
  background:radial-gradient(circle at 50% 50%, rgba(255,0,0,0) 0%, rgba(120,0,0,.9) 100%);
}

.hell-level-2 .gate::before{
  animation:hellLightning2 var(--hell-duration) ease-in-out forwards;
}
.hell-level-3 .gate::before{
  animation:hellLightning3 var(--hell-duration) ease-in-out forwards;
}
.hell-level-4 .gate::before{
  animation:hellLightning4 var(--hell-duration) ease-in-out forwards;
}
.hell-level-5 .gate::before{
  animation:hellLightning5 var(--hell-duration) ease-in-out forwards;
}
@keyframes hellLightning2{
  0%,4%{opacity:0} 5%{opacity:.95} 6%{opacity:0}
  10%{opacity:.8} 11%{opacity:0}
  18%{opacity:.9} 19%{opacity:0}
  25%{opacity:.6} 26%{opacity:0}
  34%{opacity:.85} 35%{opacity:0}
  42%{opacity:.5} 43%,100%{opacity:0}
}
@keyframes hellLightning3{
  0%,3%{opacity:0} 4%{opacity:1} 5%{opacity:0}
  8%{opacity:.9} 9%{opacity:0}
  13%{opacity:.95} 14%{opacity:0}
  19%{opacity:.85} 20%{opacity:0}
  26%{opacity:.9} 27%{opacity:0}
  33%{opacity:.7} 34%{opacity:0}
  40%{opacity:.85} 41%{opacity:0}
  48%{opacity:.55} 49%,100%{opacity:0}
}
@keyframes hellLightning4{
  0%,2%{opacity:0} 3%{opacity:1} 4%{opacity:0}
  7%{opacity:.95} 8%{opacity:0}
  11%{opacity:1} 12%{opacity:0}
  15%{opacity:.9} 16%{opacity:0}
  20%{opacity:.95} 21%{opacity:0}
  25%{opacity:.85} 26%{opacity:0}
  31%{opacity:.95} 32%{opacity:0}
  37%{opacity:.75} 38%{opacity:0}
  44%{opacity:.9} 45%{opacity:0}
  52%{opacity:.6} 53%,100%{opacity:0}
}
@keyframes hellLightning5{
  0%,2%{opacity:0} 3%{opacity:1} 4%{opacity:0}
  6%{opacity:1} 7%{opacity:0}
  9%{opacity:.95} 10%{opacity:0}
  12%{opacity:1} 13%{opacity:0}
  16%{opacity:.95} 17%{opacity:0}
  20%{opacity:1} 21%{opacity:0}
  24%{opacity:.9} 25%{opacity:0}
  29%{opacity:.95} 30%{opacity:0}
  34%{opacity:.85} 35%{opacity:0}
  40%{opacity:.95} 41%{opacity:0}
  46%{opacity:.75} 47%{opacity:0}
  53%{opacity:.9} 54%{opacity:0}
  61%{opacity:.65} 62%,100%{opacity:0}
}

/* gate modal behavior during transient states */
body.state-heaven .season-heaven{
  animation:heavenReveal 5.2s cubic-bezier(.45,0,.55,1) forwards;
}
@keyframes heavenReveal{
  0%,18%{opacity:0}
  30%{opacity:1}
  88%{opacity:1}
  100%{opacity:0}
}

/* gate modal behavior during transient states */
body.state-hell .gate-card{
  animation:cardHellFlash var(--hell-duration) cubic-bezier(.45,0,.55,1) forwards;
}
.hell-level-2 .gate-card{
  animation:cardHellFlash2 var(--hell-duration) cubic-bezier(.45,0,.55,1) forwards;
}
.hell-level-3 .gate-card{
  animation:cardHellFlash3 var(--hell-duration) cubic-bezier(.45,0,.55,1) forwards;
}
.hell-level-4 .gate-card{
  animation:cardHellFlash4 var(--hell-duration) cubic-bezier(.45,0,.55,1) forwards;
}
.hell-level-5 .gate-card{
  animation:cardHellFlash5 var(--hell-duration) cubic-bezier(.45,0,.55,1) forwards;
}
@keyframes cardHellFlash{
  0%{transform:translateX(0) scale(1);border-color:var(--gate-card-border)}
  5%,10%{transform:translateX(-14px) rotate(-2deg);border-color:rgba(255,60,40,1);box-shadow:0 0 80px rgba(220,30,10,.55)}
  7%,13%{transform:translateX(14px) rotate(2deg)}
  16%{transform:translateX(-8px) rotate(-1deg)}
  19%{transform:translateX(8px) rotate(1deg)}
  22%{transform:translateX(-4px) rotate(0)}
  25%{transform:translateX(4px) rotate(0)}
  28%,100%{transform:translateX(0) scale(1);border-color:rgba(255,80,60,.45)}
  45%{border-color:rgba(255,80,60,.55)}
  100%{border-color:var(--gate-card-border)}
}
@keyframes cardHellFlash2{
  0%{transform:translateX(0) scale(1);border-color:var(--gate-card-border)}
  4%,10%{transform:translateX(-18px) rotate(-3deg);border-color:rgba(255,50,30,1);box-shadow:0 0 100px rgba(230,25,10,.65)}
  6%,14%{transform:translateX(18px) rotate(3deg)}
  17%{transform:translateX(-12px) rotate(-2deg)}
  20%{transform:translateX(12px) rotate(2deg)}
  23%{transform:translateX(-7px) rotate(-1deg)}
  26%{transform:translateX(7px) rotate(1deg)}
  29%,100%{transform:translateX(0) scale(1);border-color:rgba(255,80,60,.5)}
  50%{border-color:rgba(255,70,50,.6)}
  100%{border-color:var(--gate-card-border)}
}
@keyframes cardHellFlash3{
  0%{transform:translateX(0) scale(1);border-color:var(--gate-card-border)}
  3%,9%{transform:translateX(-24px) rotate(-4deg);border-color:rgba(255,40,20,1);box-shadow:0 0 130px rgba(240,15,5,.75)}
  5%,13%{transform:translateX(24px) rotate(4deg)}
  16%{transform:translateX(-16px) rotate(-3deg)}
  19%{transform:translateX(16px) rotate(3deg)}
  22%{transform:translateX(-10px) rotate(-2deg)}
  25%{transform:translateX(10px) rotate(2deg)}
  28%{transform:translateX(-6px) rotate(-1deg)}
  31%{transform:translateX(6px) rotate(1deg)}
  34%,100%{transform:translateX(0) scale(1);border-color:rgba(255,80,60,.55)}
  55%{border-color:rgba(255,60,40,.65)}
  100%{border-color:var(--gate-card-border)}
}
@keyframes cardHellFlash4{
  0%{transform:translateX(0) scale(1);border-color:var(--gate-card-border)}
  2%,8%{transform:translateX(-30px) rotate(-5deg);border-color:rgba(255,30,15,1);box-shadow:0 0 160px rgba(250,10,0,.85)}
  4%,12%{transform:translateX(30px) rotate(5deg)}
  15%{transform:translateX(-20px) rotate(-4deg)}
  18%{transform:translateX(20px) rotate(4deg)}
  21%{transform:translateX(-13px) rotate(-3deg)}
  24%{transform:translateX(13px) rotate(3deg)}
  27%{transform:translateX(-8px) rotate(-2deg)}
  30%{transform:translateX(8px) rotate(2deg)}
  33%{transform:translateX(-4px) rotate(-1deg)}
  36%{transform:translateX(4px) rotate(1deg)}
  39%,100%{transform:translateX(0) scale(1);border-color:rgba(255,80,60,.6)}
  60%{border-color:rgba(255,50,30,.7)}
  100%{border-color:var(--gate-card-border)}
}
@keyframes cardHellFlash5{
  0%{transform:translateX(0) scale(1);border-color:var(--gate-card-border)}
  2%,7%{transform:translateX(-36px) rotate(-6deg);border-color:rgba(255,20,10,1);box-shadow:0 0 200px rgba(255,5,0,1)}
  4%,11%{transform:translateX(36px) rotate(6deg)}
  14%{transform:translateX(-26px) rotate(-5deg)}
  17%{transform:translateX(26px) rotate(5deg)}
  20%{transform:translateX(-18px) rotate(-4deg)}
  23%{transform:translateX(18px) rotate(4deg)}
  26%{transform:translateX(-12px) rotate(-3deg)}
  29%{transform:translateX(12px) rotate(3deg)}
  32%{transform:translateX(-8px) rotate(-2deg)}
  35%{transform:translateX(8px) rotate(2deg)}
  38%{transform:translateX(-4px) rotate(-1deg)}
  41%{transform:translateX(4px) rotate(1deg)}
  44%,100%{transform:translateX(0) scale(1);border-color:rgba(255,80,60,.65)}
  65%{border-color:rgba(255,40,25,.75)}
  100%{border-color:var(--gate-card-border)}
}

body.state-heaven .gate-card{
  animation:cardHeavenExit .8s cubic-bezier(.55,0,1,1) forwards;
  pointer-events:none;
}
@keyframes cardHeavenExit{
  0%{opacity:1;transform:scale(1) translateY(0)}
  100%{opacity:0;transform:scale(.9) translateY(-20px)}
}

/* loading HUD for successful entry */
.gate-loading{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
}
body.state-heaven .gate-loading{
  animation:loadingIn 5.2s cubic-bezier(.45,0,.55,1) forwards;
  pointer-events:auto;
}
@keyframes loadingIn{
  0%,22%{opacity:0;transform:scale(.92)}
  32%{opacity:1;transform:scale(1)}
  88%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.04)}
}

.loading-ring{
  width:64px;height:64px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--gate-zone);
  animation:loadingSpin 1s linear infinite;
}
@keyframes loadingSpin{
  to{transform:rotate(360deg)}
}

.loading-text{
  margin-top:22px;
  font-family:'Bungee',cursive;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gate-zone);
  text-shadow:0 0 24px rgba(255,200,87,.4);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .season,
  .particle{animation:none}
  .season-spring{opacity:1}
  .season-summer,.season-autumn,.season-winter{opacity:0}
}

/* ---------- small screens ---------- */
@media (max-width:480px){
  .gate-card{padding:36px 26px 34px;border-radius:24px}
  .gate-logo{font-size:30px}
  .hills{height:36%}
}