.key-shape{
  position:relative;z-index:1;width:min(94vw,560px);margin:0 auto;
}

/* blood rain: three parallax layers, each its own speed and density */
.rain-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-repeat:repeat;
}
.rain-far{
  opacity:.3;filter:blur(1.2px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='760'%3E%3Cg stroke='%23ee3e4b' fill='none' stroke-linecap='round'%3E%3Cpath d='M60 70 l2 18' stroke-width='.6' opacity='.24'/%3E%3Cpath d='M290 190 l1.5 14' stroke-width='.7' opacity='.16'/%3E%3Cpath d='M440 340 l2 20' stroke-width='.6' opacity='.26'/%3E%3Cpath d='M150 520 l1.5 15' stroke-width='.6' opacity='.18'/%3E%3Cpath d='M350 660 l2 17' stroke-width='.7' opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
  background-size:520px 760px;
  animation:rainfall-far 1.9s linear infinite;
}
.rain-mid{
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='640'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M55 60 l3 30' stroke='%23c1121f' stroke-width='.9' opacity='.34'/%3E%3Cpath d='M240 150 l2.5 24' stroke='%23ee3e4b' stroke-width='.8' opacity='.22'/%3E%3Cpath d='M380 320 l3.5 34' stroke='%23c1121f' stroke-width='1' opacity='.36'/%3E%3Cpath d='M120 440 l2.5 26' stroke='%238f0e18' stroke-width='.9' opacity='.28'/%3E%3Cpath d='M300 560 l3 29' stroke='%23c1121f' stroke-width='.8' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:440px 640px;
  animation:rainfall-mid 1.1s linear infinite;
}
.rain-near{
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='580'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M50 55 l5 48' stroke='%23c1121f' stroke-width='1.4' opacity='.42'/%3E%3Cpath d='M210 200 l4 38' stroke='%238f0e18' stroke-width='1.6' opacity='.46'/%3E%3Cpath d='M330 90 l4.5 42' stroke='%23c1121f' stroke-width='1.2' opacity='.36'/%3E%3Cpath d='M120 420 l5.5 52' stroke='%23c1121f' stroke-width='1.5' opacity='.48'/%3E%3C/g%3E%3C/svg%3E");
  background-size:380px 580px;
  animation:rainfall-near .6s linear infinite;
}
@keyframes rainfall-far{from{background-position:0 0}to{background-position:0 760px}}
@keyframes rainfall-mid{from{background-position:0 0}to{background-position:0 640px}}
@keyframes rainfall-near{from{background-position:0 0}to{background-position:0 580px}}

/* thunder: irregular lightning flashes, each strike from a different spot */
.thunder{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background-image:
    radial-gradient(ellipse 55% 45% at 50% 8%,rgba(232,226,214,.55),transparent 62%),
    linear-gradient(rgba(238,62,75,.12),transparent 65%);
  background-size:180% 150%,100% 100%;
  background-position:0% 0%,0 0;
  mix-blend-mode:screen;
  animation:thunderflash 7s linear infinite;
}
.thunder-2{
  background-image:radial-gradient(ellipse 50% 42% at 50% 10%,rgba(232,226,214,.5),transparent 60%);
  background-size:190% 160%;
  background-position:100% 0%;
  animation:thunderflash2 10s linear infinite;animation-delay:2.5s;
}
@keyframes thunderflash{
  0%,27%{opacity:0;background-position:0% 0%,0 0}
  28%{opacity:.85;background-position:0% 0%,0 0}
  29.5%{opacity:.12}
  31%{opacity:.6}
  34%{opacity:0}
  75%{opacity:0;background-position:90% 15%,0 0}
  77%{opacity:.5;background-position:90% 15%,0 0}
  79%{opacity:0;background-position:90% 15%,0 0}
  100%{opacity:0;background-position:90% 15%,0 0}
}
@keyframes thunderflash2{
  0%,44%{opacity:0;background-position:100% 0%}
  45%{opacity:.7;background-position:100% 0%}
  46.2%{opacity:.1}
  47.8%{opacity:.45}
  50%{opacity:0;background-position:100% 0%}
  87%{opacity:0;background-position:35% 30%}
  89%{opacity:.6;background-position:35% 30%}
  90%{opacity:.15}
  91.5%{opacity:.35}
  93.5%{opacity:0;background-position:35% 30%}
  100%{opacity:0;background-position:35% 30%}
}

/* faint projector glow behind the form */
.red-vignette{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(193,18,31,.13),transparent 70%);
  animation:vigflick 6s ease-in-out infinite;
}
@keyframes vigflick{
  0%,100%{opacity:1}
  8%{opacity:.7}
  11%{opacity:.95}
  44%{opacity:.82}
  48%{opacity:1}
  76%{opacity:.9}
}

.gate-card{
  width:100%;
  padding:0 clamp(4px,2vw,16px);
  text-align:center;
}

.gate-kicker{
  display:block;font-family:var(--caps,'Arial Narrow',sans-serif);
  font-size:clamp(.68rem,1.4vh,.78rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--blood-2,#ee3e4b);margin-bottom:clamp(8px,1.6vh,14px);
}
.gate-title{
  font-family:var(--display,Georgia,serif);font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1.9rem,5vh,3rem);line-height:1.05;
  margin-bottom:clamp(10px,2vh,16px);color:var(--bone,#e8e2d6);
}
.gate-title em{font-style:normal;color:var(--blood,#c1121f)}
.gate-copy{
  font-family:var(--serif,Georgia,serif);font-size:clamp(.95rem,2vh,1.1rem);
  line-height:1.65;color:#c8c0b1;margin-bottom:clamp(20px,3.5vh,32px);
  max-width:52ch;margin-left:auto;margin-right:auto;
}

.gate-form{display:flex;flex-direction:column;gap:clamp(12px,2vh,18px)}
.gate-form label{
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--serif,Georgia,serif);
  font-size:.95rem;letter-spacing:.02em;color:#cdc6b9;
  text-align:left;
}
.gate-form input{
  font-family:var(--serif,Georgia,serif);font-size:1.05rem;color:var(--bone,#e8e2d6);
  background:var(--ink-2,#120d0d);border:1px solid var(--line,rgba(232,226,214,.14));border-radius:0;
  padding:clamp(10px,1.6vh,13px) 12px;outline:none;transition:border-color .25s;
}
.gate-form input:focus{border-color:var(--blood,#c1121f)}
.gate-form input::placeholder{color:rgba(232,226,214,.3);font-style:italic}
.gate-error{
  font-family:var(--mono,'Courier New',monospace);
  color:var(--blood-2,#ee3e4b);font-size:.85rem;letter-spacing:.04em;text-align:left;
}

.gate-submit{
  margin-top:8px;font-family:var(--caps,'Arial Narrow',sans-serif);
  letter-spacing:.22em;text-transform:uppercase;font-size:1rem;
  color:var(--bone,#e8e2d6);background:var(--blood,#c1121f);
  border:none;border-radius:0;padding:clamp(13px,2vh,16px);cursor:pointer;
  transition:background .25s,box-shadow .25s;
}
.gate-submit:hover{background:var(--blood-2,#ee3e4b);box-shadow:0 8px 28px rgba(193,18,31,.35)}
.gate-submit:disabled{opacity:.6;cursor:default;box-shadow:none}

@media (max-width:480px){
  .key-shape{width:100%}
  .gate-title{font-size:clamp(1.55rem,8vw,1.9rem)}
  .gate-copy{font-size:.95rem}
  .gate-submit{letter-spacing:.14em;font-size:.95rem}
}
@media (max-height:600px) and (orientation:landscape){
  .gate-copy{margin-bottom:14px}
  .gate-form{gap:10px}
}