/* =========================================================================
   LICHBANE — single-page portal to shadowburn.net
   Self-contained. Frost/Caudex system carried over from the Shadowburn site.
   ========================================================================= */

:root{
  --bg:#050810;
  --bg-alt:#080d18;
  --panel:#0c1424;
  --frost:#6fd8ff;
  --frost-dim:#2b7fb0;
  --frost-glow:#bff0ff;
  --text:#e4eef5;
  --text-dim:#8ea2b3;
  --border:#16233a;
  --font-display:'Caudex','Palatino Linotype','Georgia',serif;
  --font-body:'Caudex','Palatino Linotype','Georgia',serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  overflow-x:hidden;
}
::selection{background:rgba(111,216,255,0.28); color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--panel); border:2px solid var(--bg); border-radius:20px;}

/* ---------- THE PORTAL (whole viewport is the link) ---------- */
.portal{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:100vh; width:100%; padding:80px 24px 96px;
  color:var(--text); text-decoration:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
}

.portal-bg{
  position:absolute; inset:-2%;
  background-size:cover; background-position:center;
  transform:scale(1.04);
  animation:portal-drift 32s ease-in-out infinite alternate;
  z-index:-3;
}
@keyframes portal-drift{
  0%{transform:scale(1.04) translate(-1%,-1%);}
  100%{transform:scale(1.1) translate(1.5%,1%);}
}

.portal-overlay{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(111,216,255,0.14), transparent 58%),
    linear-gradient(180deg, rgba(4,7,13,0.62) 0%, rgba(4,7,13,0.78) 55%, var(--bg) 100%);
}
.portal-overlay::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 30% at 28% 22%, rgba(111,216,255,0.16), transparent 70%),
    radial-gradient(34% 28% at 76% 72%, rgba(160,120,255,0.11), transparent 70%);
  mix-blend-mode:screen;
  animation:aurora 24s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes aurora{
  0%{transform:translate(-3%,-2%) scale(1);}
  100%{transform:translate(3%,3%) scale(1.09);}
}

.portal-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.frost-canvas{position:absolute; inset:0; z-index:0; pointer-events:none; display:block;}

/* ---------- corner ornaments ---------- */
.frame-corner{
  position:absolute; width:26px; height:26px; z-index:2; opacity:0.7;
  border-color:var(--frost); border-style:solid; border-width:0;
}
.frame-corner.tl{top:26px; left:26px; border-top-width:2px; border-left-width:2px;}
.frame-corner.tr{top:26px; right:26px; border-top-width:2px; border-right-width:2px;}
.frame-corner.bl{bottom:26px; left:26px; border-bottom-width:2px; border-left-width:2px;}
.frame-corner.br{bottom:26px; right:26px; border-bottom-width:2px; border-right-width:2px;}

/* ---------- content ---------- */
.portal-content{
  position:relative; z-index:3; text-align:center; max-width:780px;
  display:flex; flex-direction:column; align-items:center;
}

.portal-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-size:0.72rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--frost-glow); margin-bottom:26px;
}
.eyebrow-line{width:44px; height:1px; background:linear-gradient(90deg, transparent, var(--frost-dim), transparent); display:inline-block;}

.portal-mark{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
.portal-mark img{width:44px; height:44px; filter:drop-shadow(0 0 8px rgba(111,216,255,0.55));}
.portal-mark h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:2px;
  font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1;
}
.portal-mark h1 span{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.portal-tag{
  max-width:520px; font-size:1.02rem; line-height:1.8; color:var(--text-dim);
  margin-bottom:44px;
}

.countdown-head{
  font-family:var(--font-display); font-size:clamp(1.1rem, 2.6vw, 1.5rem);
  letter-spacing:1px; color:var(--text); margin-bottom:26px;
}

.countdown{display:flex; gap:20px; justify-content:center; flex-wrap:wrap;}
.countdown .box{
  min-width:92px; padding:20px 16px;
  border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(160deg, rgba(12,20,36,0.7), rgba(8,13,24,0.7));
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.portal:hover .countdown .box{border-color:var(--frost-dim); box-shadow:0 0 26px rgba(111,216,255,0.14);}
.countdown .num{
  font-family:var(--font-display); font-size:2.4rem; font-weight:700;
  color:var(--frost-glow); font-variant-numeric:tabular-nums; line-height:1;
}
.countdown .lbl{
  font-size:0.62rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-dim); margin-top:10px;
}

/* ---------- CTA ---------- */
.portal-cta{margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:12px;}
.portal-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px; border-radius:8px;
  font-family:var(--font-display); font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; font-size:0.9rem;
  color:#050810; background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  box-shadow:0 0 0 1px rgba(191,240,255,0.4), 0 14px 40px rgba(111,216,255,0.28);
  animation:btn-breathe 2.8s ease-in-out infinite;
}
.portal:hover .portal-btn{animation-duration:1.5s; transform:translateY(-2px);}
@keyframes btn-breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(191,240,255,0.4), 0 14px 40px rgba(111,216,255,0.24);}
  50%{box-shadow:0 0 0 1px rgba(191,240,255,0.75), 0 18px 60px rgba(111,216,255,0.5);}
}
.portal-note{font-size:0.76rem; color:var(--text-dim); letter-spacing:0.5px;}
.portal-note strong{color:var(--frost-glow); font-weight:700;}

/* ---------- foot ---------- */
.portal-foot{
  position:absolute; left:0; right:0; bottom:22px; z-index:3;
  text-align:center; padding:0 24px;
  font-size:0.66rem; line-height:1.5; color:var(--text-dim); opacity:0.65;
}
.portal-foot span{max-width:640px; display:inline-block;}

/* ---------- launch state ---------- */
.portal.is-open .portal-btn{animation-duration:1s;}
.portal.is-open .countdown .box{border-color:var(--frost); box-shadow:0 0 30px rgba(111,216,255,0.35);}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .portal{padding:64px 18px 90px;}
  .countdown{gap:12px;}
  .countdown .box{min-width:0; flex:1 1 40%; padding:16px 10px;}
  .countdown .num{font-size:1.9rem;}
  .portal-tag{font-size:0.94rem; margin-bottom:34px;}
  .frame-corner{width:18px; height:18px; top:16px !important; bottom:16px !important; left:16px !important; right:16px !important;}
  .frame-corner.tr, .frame-corner.br{left:auto !important;}
  .frame-corner.bl, .frame-corner.br{top:auto !important;}
}

@media (prefers-reduced-motion:reduce){
  .portal-bg, .portal-overlay::after, .portal-btn{animation:none !important;}
}