/* ==========================================
   ODIN LEGEND — SHOP PORTAL
   CLEAN MASTER CSS
   ========================================== */

:root{
  --bg:#050505;
  --text:#f2f2f2;
  --muted:rgba(242,242,242,.72);

  --stroke:rgba(255,255,255,.10);
  --stroke-hover:rgba(255,0,0,.25);

  --card-bg:rgba(255,255,255,.04);
  --card-bg-hover:rgba(255,255,255,.06);

  --shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* ==========================================
   RESET
   ========================================== */

*{
  box-sizing:border-box;
}

html, body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Cormorant Garamond", serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ==========================================
   CINEMATIC INTRO OVERLAY
   ========================================== */

.cinematic-intro{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);

  opacity:1;
  visibility:visible;
  transition:opacity .7s ease, visibility .7s ease;
}

.cinematic-intro.is-exiting{
  opacity:0;
  visibility:hidden;
}

.cinematic-inner{
  width:min(92vw, 760px);
  text-align:center;
  padding:40px 20px;
}

/* ===== Sigil Text Version ===== */

.cinematic-sigil-text{
  font-family:"Cinzel", serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:clamp(28px,4vw,48px);
  opacity:.95;

  text-shadow:0 0 28px rgba(255,0,0,.18);

  animation:sigilPulse 2.8s ease-in-out infinite;
}

/* ===== Sigil Image Version ===== */

.cinematic-sigil{
  width:160px;
  max-width:45vw;
  opacity:.95;

  filter:drop-shadow(0 0 28px rgba(255,0,0,.25));
  animation:sigilPulse 2.8s ease-in-out infinite;
}

@keyframes sigilPulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.04);
  }
}

/* ===== Intro Text ===== */

.cinematic-line{
  margin-top:20px;
  font-family:"Cinzel", serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(14px,2vw,20px);
  opacity:.95;
}

.cinematic-sub{
  margin-top:12px;
  font-size:clamp(16px,2vw,20px);
  opacity:.7;
}

/* ===== Button ===== */

.cinematic-btn{
  margin-top:28px;
  padding:14px 22px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);

  background:rgba(15,15,15,.65);
  color:var(--text);

  font-family:"Cinzel", serif;
  letter-spacing:.14em;
  text-transform:uppercase;

  cursor:pointer;

  box-shadow:0 0 28px rgba(255,0,0,.14);

  animation:btnBreathe 2.4s ease-in-out infinite;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

@keyframes btnBreathe{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

.cinematic-btn:hover{
  transform:translateY(-3px) scale(1.03);
  background:rgba(20,20,20,.8);
  box-shadow:0 0 45px rgba(255,0,0,.3);
}

.cinematic-btn:active{
  transform:scale(.98);
}

/* ==========================================
   PORTAL MAIN CONTENT
   ========================================== */

.portal-main{
  max-width:980px;
  margin:0 auto;
  padding:100px 18px 60px;
}

/* Hidden before intro click */
.portal-main.is-hidden{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}

/* Reveal animation */
.portal-main.is-revealed{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition:opacity .6s ease, transform .6s ease;
}

/* ==========================================
   TITLE
   ========================================== */

.portal-title{
  font-family:"Cinzel", serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:28px;
  margin:0 0 24px;
  text-align:left;
}

/* ==========================================
   GRID
   ========================================== */

.portal-grid{
  display:grid;
  gap:16px;
}

/* ==========================================
   CARDS
   ========================================== */

.portal-card{
  display:block;

  padding:22px 20px;
  border-radius:18px;

  border:1px solid var(--stroke);
  background:var(--card-bg);

  text-decoration:none;
  color:var(--text);

  box-shadow:var(--shadow);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.portal-card:hover{
  transform:translateY(-4px);
  background:var(--card-bg-hover);
  border-color:var(--stroke-hover);
}

.portal-card-title{
  font-family:"Cinzel", serif;
  margin:0 0 8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:20px;
}

.portal-card-text{
  margin:0;
  opacity:.75;
  font-size:18px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (min-width:768px){

  .portal-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  .portal-title{
    font-size:32px;
  }
}

/* ==========================================
   VAULT LOCKED STATE
   ========================================== */

body.vault-locked{
  margin:0;
  background:#050505;
  color:#f2f2f2;
  font-family:"Cormorant Garamond", serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  text-align:center;
}

.vault-wrapper{
  max-width:700px;
  padding:40px 20px;
}

.vault-title{
  font-family:"Cinzel", serif;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:20px;
  text-shadow:0 0 30px rgba(255,255,255,.15);
}

.vault-sub{
  font-size:20px;
  opacity:.85;
  line-height:1.6;
  margin-bottom:30px;
}

.vault-divider{
  width:120px;
  height:1px;
  margin:30px auto;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.4), transparent);
}

.vault-note{
  font-family:"Cinzel", serif;
  letter-spacing:.1em;
  opacity:.7;
  margin-bottom:40px;
}

/* ==========================================
   VAULT RETURN BUTTON — REAL BREATHING
   ========================================== */

.vault-return-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 40px;
  border-radius:999px;

  font-family:"Cinzel", serif;
  letter-spacing:.15em;
  text-transform:uppercase;

  text-decoration:none;
  color:#f2f2f2;

  background: radial-gradient(
    circle at 50% 40%,
    #1a1a1a 0%,
    #0f0f0f 55%,
    #070707 100%
  );

  border:1px solid rgba(255,255,255,.18);

  transition: transform .3s ease;

  animation: vaultBreathing 3.2s cubic-bezier(.4,0,.2,1) infinite;
}

/* Smooth breathing */
@keyframes vaultBreathing{
  0%,100%{
    transform: scale(1);
    box-shadow:
      inset 0 0 20px rgba(0,0,0,.9),
      0 0 25px rgba(255,255,255,.15),
      0 0 70px rgba(255,255,255,.12);
  }

  50%{
    transform: scale(1.07);
    box-shadow:
      inset 0 0 25px rgba(0,0,0,1),
      0 0 60px rgba(255,255,255,.45),
      0 0 140px rgba(255,255,255,.35);
  }
}

.vault-return-btn:hover{
  transform: scale(1.12);
}