/* styles.css */
:root{
  --bg:#032540;
  --panel:#2E2D78;

  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --accent:#B2DAEE;

  --shadow:0 18px 40px rgba(0,0,0,.35);

  --max:980px;

  --heroW:1280px;
  --heroH:719px;

  --cardW:295px;
  --cardH:405px;

  --imgW:278px;
  --imgH:290px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Kufam",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }
.muted{ color:var(--muted); }

/* Headings */
.h2{
  text-align: center;

  margin: -12px 0 30px;  /* 🔼 raises the title */

  font-weight: 400;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.15;

  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.h2 span{ font-weight:900; color:var(--accent); }
.h2--light{ color:#fff; }
.sub{
  text-align:center;
  margin:0 0 18px;
  font-size:14px;
  line-height:1.4;
}
.sub--light{ color:rgba(255,255,255,.85); }

/* Snow */
@keyframes snowFall{
  from{ transform: translate3d(0,-10%,0); }
  to{ transform: translate3d(0,18%,0); }
}

/* HERO */
.hero{
  position:relative;
  min-height: var(--heroH);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

/* HERO META BAR (matches your screenshot) */
.hero__metaBar{
  margin: 22px auto 0;
  width: min(760px, 100%);
  padding: 18px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  border-radius: 18px;

  background: rgba(70, 95, 110, 0.35);
  border: 1px solid rgba(255,255,255,0.14);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

.metaItem{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.metaIcon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: rgba(178,218,238,0.95);
}

/* HERO META ICON IMAGES */
.metaIconImg{
  width: 65.94px;      /* ✅ exact size */
  height: 65.94px;     /* ✅ exact size */

  object-fit: contain;
  flex-shrink: 0;

  margin-right: 14px;
}


.metaIcon svg{
  width: 44px;
  height: 44px;
}

.metaIcon--ring{
  border: 2px solid rgba(178,218,238,0.9);
  border-radius: 999px;
}

.metaText{
  text-align: left;
  line-height: 1.15;
}

.metaMain{
  font-family: "Kufam", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Responsive */
@media (max-width: 640px){
  .hero__metaBar{
    flex-direction: column;
    align-items: flex-start;
  }
  .metaMain{ font-size: 16px; }
}

.hero__bg{
  position:absolute; inset:0;
  background:url("./assets/Webook_1920x1280.webp") center/cover no-repeat;
  transform:scale(1.02);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 55%, rgba(3,37,64,.95) 100%),
    linear-gradient(180deg, rgba(3,37,64,.0) 0%, rgba(3,37,64,.9) 100%);
}
.hero__fade{
  position:absolute; left:0; right:0; bottom:-1px;
  height:160px;
  background:linear-gradient(180deg, rgba(3,37,64,0) 0%, var(--bg) 100%);
  z-index:2;
}
.hero__snow{
  position:absolute;
  inset:-20% -20%;
  pointer-events:none;
  z-index:1;
  background-repeat:repeat;
}
.hero__snow--1{
  opacity:.45;
  background-size:260px 260px;
  animation: snowFall 16s linear infinite;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.75) 0 1.5px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.7) 0 1px, transparent 2.5px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 60%, rgba(255,255,255,.55) 0 1.2px, transparent 2.6px);
}
.hero__snow--2{
  opacity:.25;
  background-size:340px 340px;
  animation: snowFall 26s linear infinite reverse;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.75) 0 1.5px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.7) 0 1px, transparent 2.5px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 60%, rgba(255,255,255,.55) 0 1.2px, transparent 2.6px);
}

.hero__container{
  width: var(--heroW);
  max-width: 100%;
  height: var(--heroH);
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding: 0 24px;
}
.hero__content{ width:100%; text-align:center; }
.hero__logo{ display:flex; justify-content:center; margin: 0 0 12px; }
.hero__logo img{ width:140px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.hero__title{
  margin:0 0 12px;
  font-weight:400;
  font-size: clamp(34px, 7vw, 56px);
  line-height:1.05;
  text-shadow:0 8px 22px rgba(0,0,0,.6);
}
.hero__title span{ display:inline-block; margin-top:8px; font-weight:900; letter-spacing:.5px; }
.hero__sub{
  margin:0 auto 22px;
  max-width:520px;
  font-size:13px;
  color: rgba(255,255,255,.9);
  text-shadow:0 8px 18px rgba(0,0,0,.6);
}
.hero__meta{
  margin-top:14px;
  font-size:12px;
  color: rgba(255,255,255,.85);
  text-shadow:0 8px 18px rgba(0,0,0,.6);
}
.hero__date{ font-weight:800; margin-bottom:4px; }

/* Sections */
.section{ position:relative; padding:42px 0; }
.section--tight{ padding-top:22px; }

/* About snow background */
.section--snow-bg{
  background:url("./assets/5fe4685f-5aa2-4f3a-8535-ce0850c0c616.png") center/cover no-repeat;
}
.section--snow-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(3,37,64,0.55);
  z-index:0;
}
.section--snow-bg > *{ position:relative; z-index:1; }

/* Glass Card with Ice (seated) */
.glass-card{
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.glass-card__ice{
  position:absolute;
  left:0; right:0;      /* ✅ sit exactly to box edges */
  top:-42px;
  width:100%;
  height:auto;
  z-index:3;
  pointer-events:none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.glass-card__body{
  padding: 64px 24px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}
.glass-card__logo{ display:flex; justify-content:center; margin-bottom:14px; }
.glass-card__logo img{ width:120px; opacity:.95; }
.glass-card__body p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.55;
  color: rgba(255,255,255,.92);
}

/* Panel merged */
.panel{
  background: var(--panel);
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -18px 34px rgba(0,0,0,.25);
  padding: 52px 0 64px;
}
.panel__block{ padding: 0 0 64px; }
.panel__block--map{ padding-bottom: 0; }
.panel__cta{ display:flex; justify-content:center; margin:18px 0 22px; }

.panel__block--map::before{
  content:"";
  display:block;
  height:1px;
  margin: 22px auto 30px;
  max-width: 720px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.25), transparent);
}
#plan .sub{
  margin-top: -9px;
  margin-bottom: 25px;
}


/* Cards (295x405) */
.cards{
  display:grid;
  grid-template-columns: repeat(4, var(--cardW));
  gap:22px;
  justify-content:center;
}
.card{ overflow:visible; }
.card__shell{
  position:relative;
  width: var(--cardW);
  margin:0 auto;
}
.card__ice{
  position:absolute;
  left:0; right:0;      /* ✅ sit exactly to card edges */
  top:-12px;
  width:100%;
  height:auto;
  z-index:3;
  pointer-events:none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.card__inner{
  width: var(--cardW);
  height: var(--cardH);

  /* 🔼 reduce top padding to lift image */
  padding: 24px 12px 18px;

  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 0.5px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.26);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card--active .card__inner{
  background: rgba(0,0,0,.28);
}

/* Card image EXACT 278x290 */
.card__img{
  width: var(--imgW);
  height: var(--imgH);
  object-fit: cover;
  border-radius: 14px;
  border: 0.5px solid rgba(255,255,255,.14);
  margin-bottom: 10px;
}

/* Card typography */
.card h3{
  margin: 0 0 8px;
  font-family: "Kufam", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #ff8c2a;
}
.card p{
  margin: 0;
  font-family: "Kufam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,.92);
}

/* Map */
.map{
  width: 1162px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.map img{ width:100%; height:auto; }


/* MAP → WHY SMOOTH TRANSITION */


/* Soft mist glow */
.section-transition::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.0)
    );

  filter: blur(18px);
  opacity: .6;
  pointer-events:none;
}


/* Why */
.section--why{
  position: relative;
  margin-top: -90px;     /* same magnitude as transition */
  padding-top: 140px;   /* keep content spacing correct */

  min-height: 50vh;            /* full background */
  padding: 120px 0 80px;        /* top / bottom breathing room */

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

/* ✅ Fade at the TOP of WHY section */
.section--why{
  position: relative;
  overflow: hidden;      /* ✅ clips fade */
  margin-top: 0;         /* ✅ stop overlap into map */
}

/* fade only at TOP of WHY */
.why__fadeTop{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 180px;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(46,45,120,1) 0%,
    rgba(46,45,120,.75) 35%,
    rgba(46,45,120,.35) 70%,
    rgba(46,45,120,0) 100%
  );
}


.why__bg{
  position:absolute; inset:0;
  background: url("./assets/u2585934899_A_clean_and_beautiful_Christmas_amusement_park_at_n_8584a2fe-f692-4716-bd64-3a364b5ad238.png")
    center/cover no-repeat;
  transform: scale(1.03);
  opacity: .95;
}
.why__overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    180deg,
    rgba(3,37,64,.15) 0%,
    rgba(3,37,64,.65) 55%,
    rgba(46,45,120,.72) 100%
  );
}
.why__content{
  position: relative;
  z-index: 4;

  display: flex;
  flex-direction: column;
  height: 100%;
}

.why__snow{
  position:absolute;
  inset:-20% -20%;
  pointer-events:none;
  z-index:3;
  opacity:.55;
  background-repeat:repeat;
  background-size:260px 260px;
  animation: snowFall 16s linear infinite;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.75) 0 1.5px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.7) 0 1px, transparent 2.5px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 60%, rgba(255,255,255,.55) 0 1.2px, transparent 2.6px);
}
.why__snow--2{
  opacity:.28;
  background-size:340px 340px;
  animation: snowFall 26s linear infinite reverse;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.75) 0 1.5px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.7) 0 1px, transparent 2.5px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 60%, rgba(255,255,255,.55) 0 1.2px, transparent 2.6px);
}

.features{
  margin-top: 210px;             /* push to bottom */
  padding-bottom: 10px;

  display: grid;                /* ✅ force grid */
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: end;
}
.feature{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  min-height: auto;
  padding: 0;                 /* remove box padding */

  background: none;           /* ❌ remove box */
  border: none;               /* ❌ remove border */
}

.feature__icon{
  width: 59px;                /* ✅ exact size */
  height: 67px;               /* ✅ exact size */

  object-fit: contain;
  margin-bottom: 10px;

  opacity: 1;
  filter: none;               /* remove glow/shadow */
}

.feature .txt{
  margin-top: 0;
  font-size: 16px;
  line-height: 1.35;
  color: rgba(255,255,255,.9);
}


/* Final CTA */
.section--final{
  position: relative;
  width: 100%;
  padding: 120px 0 0;
  background: #2e2d78;
  overflow: hidden;
  
}


.final-bg{
  position: absolute;
  inset: 20px;

  border-radius: 28px;

  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.08) 0%, transparent 60%),
    radial-gradient(circle at 85% 40%, rgba(255,255,255,.06) 0%, transparent 55%),
    rgba(90, 90, 150, 0.65);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 25px 60px rgba(0,0,0,.35);

  z-index: 1;
}

/* Smooth transition from WHY to FINAL */
.final__fadeTop{
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(3,37,64,0) 0%,
    rgba(46,45,120,0.45) 35%,
    rgba(46,45,120,0.85) 70%,
    rgba(46,45,120,1) 100%
  );
}



/* ✅ Snowflakes layer (same style as Plan/Map) */
.section--final::after{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 28px;
  pointer-events:none;
  z-index: 4;

  background-image:
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png");

  background-repeat: no-repeat;

  background-size:
    190px 190px,
    140px 140px,
    110px 110px,
    170px 170px,
    120px 120px;

  background-position:
    -40px 30px,
    92% 80px,
    10% 75%,
    86% 60%,
    12% 95%;

  opacity: 0.16;
}

/* Snowflake shapes (CSS only) */



.final-bg::before{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.15) 0 14px, transparent 16px),
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.12) 0 18px, transparent 20px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.1) 0 22px, transparent 24px);
  opacity: .6;

}

.final-bg::after{
  background-image:
    radial-gradient(circle at 35% 65%, rgba(255,255,255,.08) 0 12px, transparent 14px),
    radial-gradient(circle at 60% 55%, rgba(255,255,255,.07) 0 16px, transparent 18px);
  opacity: .4;

}

/* ✅ Fade at the TOP of FINAL section (blends from WHY into FINAL) */
.final__fadeTop{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 220px;              /* transition depth */
  pointer-events: none;
  z-index: 2;

  background: linear-gradient(
    180deg,
    rgba(3,37,64,0) 0%,        /* transparent (shows WHY bg) */
    rgba(46,45,120,0.25) 25%,  /* starts tinting */
    rgba(46,45,120,0.65) 55%,  /* stronger tint */
    rgba(46,45,120,1) 100%     /* final panel color */
  );
}

.final-box{
  position: relative;
  width: 1218px;
  height: 361px;
  margin: -40px auto 0;   /* 🔼 pulls box upward */

  border-radius: 32px;
  background: rgba(255,255,255,0.08);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 25px 60px rgba(0,0,0,0.35);

  overflow: hidden;
  z-index: 4;
}

.final-box__snow{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image:
    url("./assets/snowflake.svg"),
    url("./assets/snowflake.svg"),
    url("./assets/snowflake.svg");

  background-repeat: no-repeat;

  background-size:
    180px 180px,
    120px 120px,
    140px 140px;

  background-position:
    6% 30%,
    14% 72%,
    88% 56%;

  opacity: 0.18;
}

.final-box__content{
  position: relative;
  z-index: 2;

  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}



.final-box .wrap{
  text-align: center;
}



/* Content above background */
.section--final .wrap{
  position: relative;
  z-index: 5;

  height: 100%;

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

  text-align: center;
}


.final{
  text-align: center;
}
.btnTicket{
  width: 348px;
  height: 71px;

  position: relative;
  overflow: visible;        /* ✅ allow ice to hang outside */
  border-radius: 18px;

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

  background: #2e2d78;
  border: 1px solid rgba(255,255,255,.16);

  font-family: "Kufam", sans-serif;
  font-size: 24px;
  font-weight: 800;

  color: #B2DAEE;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Book Tickets ice */
.btnTicket__iceWrap{
  position: absolute;
  left: 9px;              /* ✅ move to left */
  top: -9px;              /* ✅ sits on top edge */
  width: 120px;            /* ✅ small ice chunk */
  height: auto;
  pointer-events: none;
  z-index: 3;
}

.btnTicket__ice{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.20));
}


.btnTicket__ice{
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width:110%;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
  opacity:.95;
}



/* Responsive */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, var(--cardW)); }
  .features{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: var(--cardW); }
}

/* PANEL (Plan + Map background) */
.panel{
  position: relative;
  overflow: hidden; /* keep flakes inside rounded corners */
}

/* Snowflakes layer (multiple positions) */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  background-image:
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png"),
    url("./assets/snowflake.png");

  background-repeat: no-repeat;

  /* ✅ sizes of each snowflake */
  background-size:
    589px 484px,
    140px 140px,
    110px 110px,
    170px 170px,
    120px 120px,
    90px 90px;

  /* ✅ positions like your screenshot */
  background-position:
    -150px 40px,     /* top-left big */
    92% 110px,      /* top-right */
    8% 72%,         /* left-middle */
    86% 62%,        /* right-middle */
    12% 92%,        /* bottom-left */
    92% 92%;        /* bottom-right */

  opacity: 0.18;   /* subtle */
  filter: blur(0.2px);
}

/* keep content above flakes */
.panel > *{
  position: relative;
  z-index: 2;
}

@media (max-width: 1240px){
  .final-box{
    width: calc(100% - 32px);
    height: auto;
    min-height: 361px;
    padding: 24px;
  }
}