/* css/style.css */
:root{
  --red:#c1121f;
  --blue:#1d4ed8;
  --white:#f8fafc;
  --bg1:#05060a;
  --bg2:#0a0f24;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--white);
  background:
    radial-gradient(700px 400px at 50% 30%, rgba(29,78,216,.25), transparent 60%),
    radial-gradient(700px 400px at 50% 65%, rgba(193,18,31,.25), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow:hidden;
}

/* =========================
   INTRO OVERLAY
========================= */
.intro{
  position:fixed;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  opacity:1;
  transition:opacity 800ms ease, transform 800ms ease;
}

.intro-layer{
  position:absolute;
  inset:0;
  background:#000;
}

.intro-content{
  position:relative;
  z-index:1;
  text-align:center;
  padding:24px;
  width:min(840px,92vw);
}

#introLine{
  position:relative;
  margin:0;

  font-family:"Cinzel", serif;
  font-size:clamp(30px,4.2vw,46px);
  letter-spacing:.38em;
  text-transform:uppercase;
  color:#c9c9c4;

  opacity:0;
  transform:translateY(6px);
  filter: blur(14px) brightness(.55) contrast(.85);

  transition:
    opacity 2.6s ease,
    transform 2.6s ease,
    filter 2.6s ease;
}

#introLine.intro-hidden{
  visibility:hidden;
}

#introLine.show{
  opacity:1;
  transform:translateY(0);
  filter: blur(0px) brightness(1) contrast(1.05);
}

.intro-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-52%, -50%);

  font-family:"Cinzel", serif;
  font-size:16px;
  letter-spacing:.28em;
  text-transform:uppercase;

  background:none;
  border:none;
  color:#c9c9c4;
  cursor:pointer;

  opacity:0;
  transition:
    opacity 700ms ease,
    color 300ms ease;
}

.intro-btn.show{ opacity:1; }
.intro-btn:hover{ color:#f0f0ea; }

.intro-btn:active{
  transform:translate(-52%, -50%) scale(.97);
}

body.ritual-started .intro{
  opacity:0;
  pointer-events:none;
  transform:scale(1.02);
}

/* =========================
   APP VISIBILITY
========================= */
.app-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity 700ms ease, transform 700ms ease;
}

body.app-visible .app-hidden{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* =========================
   GATE / LOGO
========================= */
.gate{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:0;
  perspective:1200px;
  opacity:0;
  transition:opacity 800ms ease;
}

body.ritual-started .gate{
  opacity:1;
}

.gate-single{
  position:absolute;
  width:min(72vh,80vw);
  height:min(72vh,80vw);
  background:url("../assets/images/hffl-logo.png") center/contain no-repeat;
  opacity:0;
  animation:none;
  filter:
    drop-shadow(0 0 34px rgba(29,78,216,.35))
    drop-shadow(0 0 26px rgba(193,18,31,.25));
  transition:opacity 700ms ease;
}

body.ritual-started .gate-single{
  opacity:.10;
  animation:sealIdlePulse 6.5s ease-in-out infinite;
  transition:opacity 5000ms ease;
}

body.team-confirmed .gate-single{
  animation:none;
  opacity:.10;
}

.gate-half{
  position:absolute;
  width:min(72vh,80vw);
  height:min(72vh,80vw);
  background:url("../assets/images/hffl-logo.png") center/contain no-repeat;
  opacity:0;
  visibility:hidden;
  filter:
    drop-shadow(0 0 34px rgba(29,78,216,.35))
    drop-shadow(0 0 26px rgba(193,18,31,.25));
  transform-style:preserve-3d;
}

.gate-left{
  clip-path:inset(0 50% 0 0);
  transform-origin:left center;
}

.gate-right{
  clip-path:inset(0 0 0 50%);
  transform-origin:right center;
}

/* =========================
   MAIN CONTENT
========================= */
.center{
  position:relative;
  z-index:2;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:40px;
  text-align:center;
  padding:20px;
}

/* =========================
   CODE CARD
========================= */
.card{
  padding:36px 38px;
  background:rgba(255,255,255,.06);
  border-radius:22px;
  backdrop-filter:blur(10px);
  transition:opacity 600ms ease, transform 600ms ease;
}

.card.fade-out{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}

.code-box{
  display:flex;
  gap:14px;
}

.code-box input{
  width:52px;
  height:72px;
  font-size:38px;
  text-align:center;
  background:none;
  border:none;
  border-bottom:4px solid rgba(248,250,252,.65);
  color:white;
  outline:none;
}

.enter-hint{
  margin-top:16px;
  font-size:14px;
  animation:pulse 1.2s ease-in-out infinite;
}

.hint{
  margin-top:10px;
  min-height:22px;
  font-size:14px;
  opacity:.9;
}

/* =========================
   TEAMNAME
========================= */
.teamname-wrap{
  padding:34px 40px;
  background:rgba(255,255,255,.06);
  border-radius:22px;
  backdrop-filter:blur(10px);
box-shadow:
  0 0 0 1px rgba(255,255,255,.12),
  0 0 40px rgba(255,255,255,.18),
  0 0 32px rgba(255,255,255,.12);


  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;

  opacity:0;
  transform:translateY(10px);
  transition:opacity 1200ms ease, transform 1200ms ease;
}

.teamname-wrap.show{
  opacity:1;
  transform:translateY(0);
}


.teamname-wrap.fade-out{
  opacity:0;
  transform:translateY(10px);
}


.teamname-input{
  width:min(420px,82vw);
  height:60px;

  font-family:"Cinzel", serif;
  font-size:20px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;

  background:rgba(0,0,0,.25);
  border:none;
  border-radius:12px;

  color:#f0f0ea;
  outline:none;

box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.25),
  0 0 22px rgba(255,255,255,.25);


  transition:
    box-shadow 300ms ease,
    background 300ms ease;
}

.teamname-input:focus{
  background:rgba(0,0,0,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 0 28px rgba(255,255,255,.45);
}



/* =========================
   UNLOCK ANIMATION (Gate open)
========================= */
body.unlocked .gate-single{
  opacity:0;
  animation:none;
  visibility:hidden;
}

body.unlocked .gate-half{
  opacity:1;
  visibility:visible;
}

body.unlocked .gate-left{
  animation:gateOpenLeft 2600ms ease-in-out forwards;
}

body.unlocked .gate-right{
  animation:gateOpenRight 2600ms ease-in-out forwards;
}

/* =========================
   WALKTHROUGH (Zoom through gate)
========================= */
body.walkthrough .gate-left{
  animation:walkThroughLeft 1400ms ease-in forwards;
}

body.walkthrough .gate-right{
  animation:walkThroughRight 1400ms ease-in forwards;
}

/* =========================
   BLACKOUT OVERLAY
========================= */
.glow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 600ms ease;
  background:#000;
}


body.blackout .glow{
  opacity:1;
}

/* =========================
   HELPERS
========================= */
.hidden{display:none !important}

/* =========================
   KEYFRAMES
========================= */
@keyframes sealIdlePulse{
  0%,100%{opacity:.08; transform:scale(1)}
  50%{opacity:.14; transform:scale(1.02)}
}

@keyframes gateOpenLeft{
  0%{transform:rotateY(0)}
  100%{transform:rotateY(75deg) translateX(-6vw)}
}

@keyframes gateOpenRight{
  0%{transform:rotateY(0)}
  100%{transform:rotateY(-75deg) translateX(6vw)}
}

@keyframes walkThroughLeft{
  0%{transform:rotateY(75deg) translateX(-6vw) scale(1)}
  100%{transform:rotateY(90deg) translateX(-500%) scale(6)}
}

@keyframes walkThroughRight{
  0%{transform:rotateY(-75deg) translateX(6vw) scale(1)}
  100%{transform:rotateY(-90deg) translateX(500%) scale(6)}
}

@keyframes pulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}