/* =========================================
   PIZZA ANGELY — PREMIUM CLEAN CSS
========================================= */

/* =========================================
   ROOT
========================================= */

:root{

  --bg:#050505;

  --gold:#D4AF37;
  --gold-light:#F3D57A;
  --gold-dark:#9F7324;

  --white:#f5f1e8;

  --text:rgba(255,255,255,.82);

  --text-soft:rgba(255,255,255,.62);

  --line:rgba(212,175,55,.16);

  --card:
    linear-gradient(
      180deg,
      rgba(10,10,10,.92),
      rgba(5,5,5,.96)
    );

  --shadow:
    0 25px 70px rgba(0,0,0,.75);

  --glow:
    0 0 30px rgba(212,175,55,.10);

  --radius:34px;
}

/* =========================================
   GLOBAL
========================================= */

*{
  box-sizing:border-box;
}

html,
body{

  margin:0;
  padding:0;

  background:var(--bg);

  color:#fff;

  overflow-x:hidden;

  font-family:
    system-ui,
    sans-serif;
}

/* =========================================
   PAGE SYSTEM
========================================= */

.page{

  position:fixed;

  top:70px;
  left:0;

  width:100%;

  height:calc(100dvh - 70px - 95px);

  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  opacity:0;

  pointer-events:none;

  transition:opacity .3s ease;
}

.page.active{

  opacity:1;

  pointer-events:auto;
}

/* =========================================
   HOME
========================================= */

#home{

  height:100dvh;

  overflow:hidden;
}


.hero-center-cta{

  position:relative;

  z-index:20;
}

/* =========================================
   TOPBAR
========================================= */

.topbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:1000;

  padding:
    16px 20px 14px;

  text-align:center;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.82),
      rgba(0,0,0,.30),
      transparent
    );

  backdrop-filter:blur(10px);
}

.logo{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:38px;

  letter-spacing:4px;

  line-height:1;

  color:var(--white);
}

.logo span{

  color:var(--gold);

  font-weight:500;
letter-spacing:6px;
  font-style:normal;
}

.top-location{

  margin-top:2px;

  font-size:15px;

  letter-spacing:2px;

  color:var(--text);
}

/* =========================================
   BUTTON PREMIUM
========================================= */

.premium-btn{

  position:relative;

  overflow:hidden;

  min-width:260px;

  height:68px;

  border:none;

  border-radius:999px;

  cursor:pointer;

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

  gap:2px;

  background:
    rgba(4,4,4,.96);

  border:
    1px solid rgba(212,175,55,.28);

  box-shadow:
    0 10px 35px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.03);

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

.premium-btn:hover{

  transform:translateY(-2px);

  border-color:
    rgba(212,175,55,.5);

  box-shadow:
    0 0 28px rgba(212,175,55,.12),
    0 10px 35px rgba(0,0,0,.55);
}

.premium-btn .btn-main{

  color:var(--gold);

  font-size:18px;

  font-weight:800;

  letter-spacing:.08em;
}

.premium-btn .btn-sub{

  color:
    rgba(212,175,55,.72);

  font-size:11px;

  letter-spacing:.08em;
}

/* =========================================
   NAVBAR
========================================= */

.nav-bar{

  position:fixed;

  bottom:0;
  left:0;

  width:100%;

  z-index:900;

  display:flex;

  justify-content:space-around;

  padding:12px 0;

  background:
    rgba(5,5,5,.94);

  border-top:
    1px solid rgba(212,175,55,.08);

  backdrop-filter:blur(18px);

  box-shadow:
    0 -10px 40px rgba(0,0,0,.45);
}

.nav-item{

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

  gap:4px;

  color:
    rgba(212,175,55,.68);

  transition:.25s ease;
}

.nav-item.active{
  color:#fff;
}

.nav-item svg{

  width:22px;
  height:22px;

  fill:currentColor;
}

.nav-item span{

  font-size:11px;

  letter-spacing:.18em;
}

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

.premium-club,
.student-card,
.loyalty-card,
.loyalty-login{

  position:relative;

  overflow:hidden;

  width:min(92vw,420px);

  margin:auto;

  padding:
    42px 28px
    32px;

  border-radius:38px;

  background:var(--card);

  border:
    1px solid rgba(212,175,55,.18);

  backdrop-filter:blur(20px);

  box-shadow:
    var(--shadow),
    var(--glow);

  text-align:center;
}

.premium-club::before,
.student-card::before,
.loyalty-card::before,
.loyalty-login::before{

  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at top,
      rgba(212,175,55,.08),
      transparent 60%
    );
}

/* =========================================
   TITLES
========================================= */

.club-title,
.student-card h2,
#fidelityTitle{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:52px;

  line-height:.95;

  font-weight:400;

  letter-spacing:.05em;

  color:var(--white);

  margin-bottom:18px;
}

.club-description{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:28px;

  line-height:1.1;

  letter-spacing:.12em;

  color:
    rgba(255,255,255,.82);

  margin-bottom:30px;
}

/* =========================================
   CLUB BUTTONS
========================================= */

.club-actions{

  display:flex;

  flex-direction:column;

  gap:18px;
}

.club-btn{

  display:flex;

  align-items:center;
  justify-content:space-between;

  min-height:98px;

  padding:
    20px 22px;

  border-radius:28px;

  background:
    rgba(8,8,8,.92);

  border:
    1px solid rgba(212,175,55,.30);

  backdrop-filter:blur(18px);

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

.club-btn:hover{

  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #f4d87f,
      #c99f50
    );

  box-shadow:
    0 0 40px rgba(212,175,55,.20);
}

.club-btn-left{

  display:flex;

  align-items:center;

  gap:18px;
}

.club-btn-title{

  font-family:
    "Cinzel",
    serif;

  font-size:28px;

  letter-spacing:3px;

  color:var(--gold);
}

.club-btn-sub{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:18px;

  color:
    rgba(255,255,255,.74);
}

/* =========================================
   QR FIX
========================================= */

.qr-container{

  display:flex;

  justify-content:center;

  align-items:center;

  margin:
    20px auto;
}

#studentQR,
#qrcode{

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:190px;
}

#studentQR canvas,
#studentQR img,
#qrcode canvas,
#qrcode img{

  width:170px !important;
  height:170px !important;

  background:#fff;

  padding:10px;

  border-radius:18px;
}

/* =========================================
   FLOATING CLUB BUTTON
========================================= */

#floatingClubBtn{

  position:fixed;

  top:78px;
 right:14px;

  z-index:999999999;

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

  gap:8px;

  height:42px;

  padding:0 16px;

  border:none;

  border-radius:999px;

  background:
    rgba(5,5,5,.72);

  border:
    1px solid rgba(212,175,55,.22);

  backdrop-filter:blur(18px);

  color:var(--gold);

  font-size:13px;

  font-weight:700;

  white-space:nowrap;

  cursor:pointer;

  box-shadow:
    0 8px 25px rgba(0,0,0,.35);

  opacity:1;
  visibility:visible;

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

  background:
    rgba(8,8,8,.58);

  backdrop-filter:blur(20px);

  border:
    1px solid rgba(212,175,55,.18);
}
#floatingClubBtn:hover{

  transform:translateY(-2px);

  background:
    rgba(10,10,10,.82);

  border-color:
    rgba(212,175,55,.45);
}

#floatingClubBtn svg{

  width:16px;
  height:16px;

  fill:var(--gold);

  flex-shrink:0;
}
/* =========================================
   FOOTER CLOSE
========================================= */

.club-footer-close,
.student-footer-close,
.loyalty-footer-close{

  display:flex;

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

  gap:24px;

  margin-top:30px;

  cursor:pointer;
}

.club-footer-close::before,
.club-footer-close::after,
.student-footer-close::before,
.student-footer-close::after,
.loyalty-footer-close::before,
.loyalty-footer-close::after{

  content:"";

  flex:1;

  height:1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(212,175,55,.28)
    );
}

.club-footer-close::after,
.student-footer-close::after,
.loyalty-footer-close::after{

  background:
    linear-gradient(
      to left,
      transparent,
      rgba(212,175,55,.28)
    );
}

.club-footer-close span,
.student-footer-close span,
.loyalty-footer-close span{

  font-size:13px;

  letter-spacing:5px;

  color:
    rgba(255,255,255,.72);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

  .hero-story{

    padding:
      24px 14px
      120px;
  }

  .premium-btn{

    height:54px;

    min-width:220px;
  }

  .club-title,
  .student-card h2,
  #fidelityTitle{

    font-size:34px;
  }

  .club-description{

    font-size:18px;
  }

  .club-btn{

    min-height:90px;

    padding:
      16px 18px;
  }

  .club-btn-title{

    font-size:22px;
  }

  .club-btn-sub{

    font-size:15px;
  }

  #floatingClubBtn{

    bottom:96px;

    height:42px;

    padding:0 14px;

    font-size:13px;
  }
}
#clubModal{
  z-index: 5000;
}

.nav-bar{
  z-index:6000;
}

#clubModal{
  z-index:5000;
}
.hero-story::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,.15),
      rgba(0,0,0,.55)
    );
}

.premium-btn{
  box-shadow:
    0 0 0 1px rgba(212,175,55,.15),
    0 10px 35px rgba(0,0,0,.55),
    0 0 25px rgba(212,175,55,.08);
}
.hero-center-cta{
  position:absolute;
  left:50%;
  bottom:160px;
  transform:translateX(-50%);
}
/* =========================================
   HERO PREMIUM ANIMATION
========================================= */
.hero-story{

  position:relative;

  height:100dvh;

  overflow:hidden;

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

  padding:
    80px 20px
    140px;

  background:#000;
  
}
.hero-story::before{

  content:"";

  position:absolute;

  inset:-2%;

  z-index:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.30),
      rgba(0,0,0,.58)
    ),
    url("/image/hero-pizza.jpg");

  background-size:cover;
  background-position:center;

  transform:scale(1);

  animation:
    heroCinema 18s ease-in-out infinite alternate;

  will-change:
    transform,
    filter;
}
/* =========================================
   ANIMATIONS
========================================= */

@keyframes heroCinema{

  0%{
    transform:scale(1);
    filter:
      brightness(.92)
      saturate(1);
  }

  100%{
    transform:scale(1.045);
    filter:
      brightness(1)
      saturate(1.08);
  }

}

@keyframes fireGlow{

  0%{
    opacity:.25;
    transform:scale(1);
  }

  100%{
    opacity:.55;
    transform:scale(1.08);
  }

}
@media(max-width:480px){

  .hero-story::before{

   background-size:cover;
    background-position:center 42%;
    background-repeat:no-repeat;

  }

}
/* =========================================
   HERO CONTENT
========================================= */

.hero-content{

  position:relative;

  z-index:10;

  max-width:700px;

  margin:auto;

  text-align:center;

  padding:0 24px;

  transform:translateY(-40px);
}

.hero-kicker{

  display:inline-block;

  margin-bottom:20px;

  padding:8px 18px;

  border:
    1px solid rgba(212,175,55,.24);

  border-radius:999px;

  background:
    rgba(0,0,0,.28);

  backdrop-filter:blur(12px);

  color:rgba(255,255,255,.82);

  font-size:12px;

  letter-spacing:.35em;

  text-transform:uppercase;
}

.hero-title{

  margin:0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:clamp(52px,8vw,92px);

  line-height:.92;

  font-weight:400;

  letter-spacing:.02em;

  color:#fff;

  text-shadow:
    0 10px 30px rgba(0,0,0,.55);
}

.hero-description{

  max-width:620px;

  margin:
    26px auto 0;

  color:
    rgba(255,255,255,.76);

  font-size:18px;

  line-height:1.7;

  letter-spacing:.04em;

  text-shadow:
    0 5px 20px rgba(0,0,0,.5);
}