:root{
  --bg0:#071f18;
  --bg1:#0b3d2e;
  --card:#0f2f24cc;
  --card2:#0e2a20e6;
  --text:#f6fff9;
  --muted:#cfe8dc;
  --gold:#ffd36e;
  border-top: 1px solid rgba(255,223,138,.16);
  --green:#38d39f;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 22px;
   --green-deep: #0b3d2e;
  box-shadow: 0 -12px 42px rgba(0,0,0,.26);

  --gold: #E6C45A;
  --gold-rich: #ffdf8a;

  --red: #ff3b3b;          /* vibrant Christmas red */
  --red-soft: #ff6b6b;

  --text: #F6F2E8;
  --muted: #d9f3e7;

  --green-1: #1C6B3A;
  --green-2: #0F4F28;
  --green-3: #0B3D1E;
  --green-4: #062B15;
  --green-5: #041E0F;

  /* === ACCENTS === */
  --gold: #ffd36e;
  --gold-rich: #ffdf8a;
  --red: #ff3b3b;

  /* === TEXT === */
  --text-main: #f6fff9;
  --text-muted: #d9f3e7;
}



*{ 
  box-sizing:border-box;
}

::selection {
  background: rgba(255,211,110,.35);
  color: var(--text-main);
}
html{ 
  height:100%; 
  margin: 0;
  scroll-behavior: smooth;
}
body{ height:100%; margin: 0; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
  font-size: 15px;
  background:
    radial-gradient(circle at 50% -12%, rgba(255,223,138,.12), transparent 42%),
    radial-gradient(circle at 20% 0%, rgba(56,211,159,.10), transparent 48%),
    radial-gradient(160% 130% at 50% -10%,
      #1C6B3A 0%,
      #0F4F28 38%,
      #0B3D1E 60%,
      #062B15 80%,
      #041E0F 100%),
    linear-gradient(180deg, #0b3d2e 0%, #062b15 68%, #041e0f 100%);
  background-attachment: fixed;
  color: var(--text-main);
  min-height: 100vh;
  position: relative;
  animation: pageLoad 1s ease-out;
}

@keyframes pageLoad {
  from { opacity: 0; }
  to { opacity: 1; }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,211,110,.08) 0%, transparent 35%),
    radial-gradient(circle at 85% 50%, rgba(56,211,159,.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,77,90,.05) 0%, transparent 45%);
  pointer-events: none;
  animation: bgShimmer 8s ease-in-out infinite;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: -10% -20% 0 -20%;
  background:
    linear-gradient(120deg, rgba(255,223,138,.08), transparent 40%, rgba(56,211,159,.06) 70%, transparent 90%),
    linear-gradient(210deg, rgba(255,77,90,.08), transparent 45%, rgba(56,211,159,.06) 78%, transparent 95%);
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: 0.28;
  animation: auroraDrift 26s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes bgShimmer {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1.02);
    opacity: 0.24;
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.04);
    opacity: 0.32;
  }
  100% {
    transform: translate3d(2%, -3%, 0) scale(1.03);
    opacity: 0.26;
  }
}

.snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  z-index: 1;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.9) 1.7px, transparent 1.6px),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,.65) 1.5px, transparent 1.4px),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.75) 1.7px, transparent 1.6px),
    radial-gradient(circle at 90% 60%, rgba(255,255,255,.55) 1.5px, transparent 1.5px);
  background-size: 260px 260px, 340px 340px, 300px 300px, 420px 420px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  animation: snowMove 10s linear infinite;
  filter: blur(.25px);
}

@keyframes snowMove{
  from{ 
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  }
  to{ 
    background-position: 0 500px, 40px 560px, 130px 770px, 70px 600px;
  }
}

/* --- Hero --- */
.hero{
  padding: 48px 18px 18px;
  margin-bottom: clamp(36px, 6vw, 72px);
  animation: heroFloat 1.2s ease-out;
}

@keyframes heroFloat {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__inner{
  max-width:1100px;
  margin:0 auto;
  padding: 26px 20px 20px;
  border-radius: var(--radius);
  
  background: radial-gradient(
    circle at center,
    #1C6B3A 0%,
    #0F4F28 35%,
    #0B3D1E 60%,
    #062B15 85%,
    #041E0F 100%
  );
  box-shadow: 0 25px 80px rgba(0,0,0,.45), 
              inset 0 1px 0 rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
}

/* .hero__inner  */


.badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-weight: 700;
  letter-spacing:.2px;
  font-size: 13px;
}

h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
}
h1 .sub{
  font-weight: 800;
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 26px);
}
.glow{
  color: var(--text);
  /* text-shadow: 0 0 18px rgba(255,211,110,.22); */
}
.hero__meta{
  margin: 10px 0 14px;
  color: var(--muted);
}
.badge--legacy {
  background: linear-gradient(
    135deg,
    rgba(255,211,110,.22),
    rgba(255,77,90,.22)
  );
  border-color: rgba(255,211,110,.45);
  color: #fff6dc;
  box-shadow: 0 0 18px rgba(255,211,110,.25);
  font-weight: 900;
}

.hero-title {
  text-align: center;
  margin: 18px 0 14px;
}

/* Soft intro text */
.hero-title .welcome {
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,255,249,1);
  display: inline-block;
  margin-bottom: 6px;
}

/* Date emphasis */
.hero-title .date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* (20px, 2.6vw, 28px); */
  /* font-size: clamp(30px, 4vw, 46px); */
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 900;
}

/* Ornaments add playful red */
.hero-title .ornament {
  font-size: 26px;
  animation: bob 2.6s ease-in-out infinite;
}

/* Red + gold glow for date */
/* .hero-title .glow {
  background: linear-gradient(
    90deg,
    var(--gold-rich),
    #fff2c2,
    var(--gold),
    var(--gold-rich)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 22px rgba(255,223,138,.55),
    0 0 36px rgba(255,59,59,.35);
} */


/* Legacy line */
.hero-title .legacy {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  margin-top: 6px;
  display: inline-block;
  color: var(--muted);
}

/* Highlight words in red *
.hero-title .legacy-word {
  color: #ff6b6b;
  position: relative;
}

/* Gold underline flourish */
.hero-title .legacy-word::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffd36e, transparent);
}

/* Subtle animation */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-title:hover .glow {
  filter: brightness(1.15);
}

.hero-title:hover .legacy-word {
  text-shadow: 0 0 12px rgba(255,107,107,0.45);
}



.hero-title .christmas {
  font-size: clamp(25px, 3.0vw, 32px);
  font-weight: 500;
  margin-top: 10px;
  display: inline-block;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c29f2b;
}

.badge--legacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.badge--legacy .infinity {
  font-size: 25px;
  color: #c29f2b !important;
  filter: none !important;
  /* text-shadow:
    0 0 14px rgba(255,223,138,.75),
    0 0 24px rgba(255,59,59,.35); */
}


.badge--legacy:hover .infinity {
  transform: rotate(12deg) scale(1.1);
  transition: transform .4s ease;
}


@keyframes infinityPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}


.pill{
  display:inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,77,90,.12);
  color: #ffd9dc;
}

/* === HERO COUNTDOWN (ENHANCED) === */

.countdown {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.countdown__item {
  position: relative;
  min-width: 110px;
  padding: 16px 14px;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.12),
    rgba(0,0,0,.25)
  );

@media (max-width: 600px) {
  .countdown {
    gap: 10px;
  }
  
  .countdown__item {
    min-width: 70px;
    padding: 12px 10px;
  }
  
  .countdown__num {
    font-size: 24px;
  }
  
  .countdown__label {
    font-size: 10px;
  }
}
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 14px 36px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  animation: countdownFloat 6s ease-in-out infinite;
}

.countdown__item:nth-child(2) { animation-delay: .6s; }
.countdown__item:nth-child(3) { animation-delay: 1.2s; }
.countdown__item:nth-child(4) { animation-delay: 1.8s; }

.countdown__item::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255,211,110,.35),
    rgba(255,77,90,.25),
    rgba(56,211,159,.25)
  );
  opacity: 0.22;
  z-index: -1;
}

.countdown__num {
  font-size: 30px;
  font-weight: 1000;
  color: var(--red-soft);
  /* text-shadow:
    0 0 14px rgba(255,211,110,.45),
    0 0 24px rgba(255,77,90,.25); */
}

.countdown__label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,255,249,.75);
}

/* gentle float */
@keyframes countdownFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.countdown__item:last-child .countdown__num {
  color: var(--text);
  /* text-shadow:
    0 0 14px rgba(255,107,107,.55),
    0 0 22px rgba(255,211,110,.35); */
}

.fineprint{
  margin-top: 12px;
  color: rgba(246,255,249,.75);
  font-size: 13px;
}

/* === HERO SNOWFLAKES (COUNTDOWN ACCENT) === */

.hero__inner {
  position: relative;
  overflow: hidden;
}

/* Snow container */
.hero-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Individual flakes */
/* .hero-snow .flake {
  position: absolute;
  top: -10%;
  color: rgba(255,255,255,0.7);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.45));
  font-size: 1px;
  animation: snowFall 10s linear infinite;
  opacity: 0.7;
} */

.hero-title .accent {
  font-size: 22px;
  color: var(--gold-rich);
  opacity: 0.95;
  text-shadow:
    0 0 10px rgba(255,223,138,.6);
}


/* Random-ish placement + timing */
/* .hero-snow .flake:nth-child(1) { left: 10%; animation-duration: 12s; }
.hero-snow .flake:nth-child(2) { left: 28%; animation-duration: 9s;  font-size: 1px; }
.hero-snow .flake:nth-child(3) { left: 50%; animation-duration: 11s; font-size: 1px; }
.hero-snow .flake:nth-child(4) { left: 68%; animation-duration: 8s;  font-size: 1px; }
.hero-snow .flake:nth-child(5) { left: 85%; animation-duration: 10s; font-size: 1px; } */

@keyframes snowFall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(140%) translateX(-20px);
    opacity: 0;
  }
}

.countdown,
.hero-title,
.hero-info,
.fineprint {
  position: relative;
  z-index: 2;
}

/* --- Layout --- */
.wrap{ max-width:1100px; margin: 0 auto; padding: 18px; }
.grid{
  display:grid;
  gap: 16px;
  grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 960px){
  .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .wrap{ padding: 14px; }
}

.card {
   background: radial-gradient(
    circle at center,
    #1d6b3a 0%,
    #165532 35%,
    #104226 60%,
    #0b301b 85%,
    #082313 100%
  );
  animation: cardSlideIn 0.8s ease-out;
  animation-fill-mode: both;
}

.grid > .card:nth-child(1) {
  animation-delay: 0.2s;
}

.grid > .card:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card{
  border-radius: var(--radius);
  
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.35), 
              inset 0 1px 0 rgba(255,255,255,.1);
  padding: 18px;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(8px);
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 90px rgba(0,0,0,.45), 
              inset 0 1px 0 rgba(255,255,255,.15);
}

.card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(400px 240px at 20% 0%, rgba(255,211,110,.25), transparent 55%),
    radial-gradient(420px 260px at 90% 10%, rgba(56,211,159,.2), transparent 58%);
  pointer-events:none;
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1.2; }
}
.card > *{ position:relative; }

.card__header h2{
  margin: 0;
  font-size: 22px;
}
.card__header p{
  margin: 6px 0 0;
  margin-bottom: 50px;
  color: var(--muted);
}

/* --- Form --- */
.form{ margin-top: 14px; display:flex; flex-direction:column; gap: 12px; }
label{ display:flex; flex-direction:column; gap:6px; }
label span{ font-size: 13px; ; font-weight: 700; }

input, textarea, select{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
}
input::placeholder, textarea::placeholder{ color: rgba(246,255,249,.55); }
input:focus, textarea:focus, select:focus{
  border-color: rgba(255,211,110,.55);
  box-shadow: 0 0 0 4px rgba(255,211,110,.12);
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.row--3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px){
  .row, .row--3{ grid-template-columns: 1fr; }
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 2px;
}

.btn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .2s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover{ 
  transform: translateY(-2px); 
  background: rgba(255,255,255,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.btn:active{ 
  transform: translateY(0px);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn--primary{
  background: linear-gradient(135deg, rgba(255,211,110,.22), rgba(56,211,159,.16));
  border-color: rgba(255,211,110,.40);
}
.btn--danger{
  background: rgba(255,77,90,.12);
  border-color: rgba(255,77,90,.35);
}

.status{
  min-height: 18px;
  font-size: 13px;
  color: rgba(246,255,249,.85);
}

.expect{
  margin-top: 30px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.expect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,77,90,.3), rgba(255,77,90,.6), rgba(255,77,90,.3));
  animation: redGlow 3s ease-in-out infinite;
}

@keyframes redGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.expect h3{ margin:0 0 8px; position: relative; z-index: 1; }
.expect ul{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
}

/* --- Bubbles --- */
.bubbleStage{
  margin-top: 14px;
  position:relative;
  height: 520px;
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.bubble{
  position:absolute;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.06));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor:pointer;
  user-select:none;
  font-weight: 1000;
  letter-spacing: .2px;
  /* color: var(--text-main); */
  color : #0d0d0d;
  animation: floaty 9s ease-in-out infinite;
  max-width: 78%;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

@keyframes floaty{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(0,-14px); }
}

.bubble--new{ outline: 3px solid rgba(255,211,110,.20); }
.bubble--need{ outline: 3px solid rgba(255,77,90,.18); }
.bubble--allergy{ outline: 3px solid rgba(56,211,159,.16); }

.legend{
  display:flex; gap:16px; align-items:center;
  color: var(--muted);
  margin-top: 12px;
  flex-wrap:wrap;
  font-size: 13px;
}
.dot{
  width: 10px; height:10px; border-radius: 50%;
  display:inline-block;
  margin-right: 6px;
}
.dot--new{ background: rgba(255,211,110,.9); }
.dot--need{ background: rgba(255,77,90,.9); }
.dot--allergy{ background: rgba(56,211,159,.9); }

/* --- Modal --- */
.modal{
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  width: min(740px, 92vw);
  background: linear-gradient(180deg, rgba(15, 107, 79, .6), rgba(7, 31, 24, .75));
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 0;
}
.modal::backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
.modal__inner{ padding: 16px; }
.modal__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.modal__top h3{ margin:0; font-size: 22px; }
.muted{ margin: 6px 0 0; color: var(--muted); }
.x{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 720px){
  .modal__grid{ grid-template-columns: 1fr; }
}
.kv{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius: 16px;
  padding: 12px;
}
.kv .k{ color: var(--muted); font-weight: 900; font-size: 12px; }
.kv .v{ margin-top: 6px; font-weight: 700; }

.modal__actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 14px;
  padding: 0;
}

.footer {
  padding: 56px 18px 72px;
  color: var(--text-main);
  text-align: center;
  background: transparent;
  border-top: 0;
  margin-top: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
}


.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 0;
}

.footer::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -30%;
  width: 200%;
  height: 180%;
  background: none;
  animation: footerShimmer 12s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 0;
}

.footer__content {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 26px 30px;
  background:
    radial-gradient(circle at 55% 45%, rgba(255,77,90,.08), transparent 48%),
    radial-gradient(
      circle at center,
      rgba(28,107,58,.78) 0%,
      rgba(15,79,40,.76) 38%,
      rgba(11,61,46,.72) 60%,
      rgba(6,43,21,.70) 82%,
      rgba(4,30,15,.70) 100%
    );
  border: 1px solid rgba(255,223,138,.12);
  border-radius: 18px;
  box-shadow:
    0 16px 34px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,223,138,.10),
    0 0 28px rgba(255,223,138,.10);
  backdrop-filter: blur(3px);
  transform: perspective(1400px) rotateX(0.8deg);
  transition: transform .5s ease, box-shadow .4s ease, translate .35s ease;
}

@media (max-width: 800px) {
  .footer__content {
    grid-template-columns: 1fr;
    gap: 32px;
    transform: none;
  }
}

.footer__content:hover {
  transform: perspective(1400px) rotateX(0deg) translateY(-2px);
  box-shadow:
    0 20px 42px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,223,138,.12),
    0 0 32px rgba(255,223,138,.14);
  transition: transform .45s ease, box-shadow .45s ease, translate .35s ease;
}

.footer__section {
  text-align: left;
}

.footer__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 700;
  opacity: 0.82;
}

.footer__hosted,
.footer__collab {
  margin: 0 0 16px 0;
  font-size: 16px;
}

.footer__highlight {
  display: inline-block;
  font-weight: 900;
  color: var(--gold-rich);
  background: linear-gradient(135deg, rgba(255,223,138,.18), rgba(56,211,159,.08), rgba(255,77,90,.10));
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,223,138,.25);
  box-shadow:
    0 2px 8px rgba(255,223,138,.10),
    0 4px 16px rgba(255,77,90,.10);
}

.footer__highlight:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(255,223,138,.18);
}

/* === PREMIUM FOOTER PROGRAM STYLING === */
.footer__program {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
}

.footer__highlight--premium {
  font-family: 'Georgia', 'Garamond', serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,223,138,0.3) 0%,
    rgba(56,211,159,0.15) 50%,
    rgba(255,223,138,0.3) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 8px 20px;
  border: 2px solid rgba(255,223,138,0.4);
  border-radius: 12px;
  box-shadow:
    0 0 20px rgba(255,223,138,0.15),
    0 0 40px rgba(56,211,159,0.08),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  position: relative;
}

.footer__highlight--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,223,138,0.1),
    transparent
  );
  border-radius: 10px;
  opacity: 0;
  animation: shimmer 3s infinite;
}

.footer__highlight--premium:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(255,223,138,0.6);
  box-shadow:
    0 0 30px rgba(255,223,138,0.25),
    0 0 60px rgba(56,211,159,0.15),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 24px rgba(0,0,0,0.3);
}

.sparkle {
  font-size: 20px;
  display: inline-block;
  animation: float 3s ease-in-out infinite;
  opacity: 0.9;
}

.sparkle--left {
  animation: float 3s ease-in-out infinite, twinkle 2.5s ease-in-out infinite;
}

.sparkle--right {
  animation: float 3s ease-in-out infinite 0.5s, twinkle 2.5s ease-in-out infinite 0.5s;
}

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

@keyframes twinkle {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    opacity: 0;
    left: -100%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 100%;
  }
}

/* === GRAND FOOTER PROGRAM CONTAINER === */
.footer__program-container {
  text-align: center;
  padding: 12px 0;
  position: relative;
  z-index: 2;
}

.footer__program {
  margin: 0 0 8px 0;
}

.footer__year-subtitle {
  margin: 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    rgba(56, 211, 159, 0.6),
    rgba(255, 223, 138, 0.8),
    rgba(56, 211, 159, 0.6)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInScale 0.8s ease-out;
  position: relative;
}

.footer__year-subtitle::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 223, 138, 0.5),
    transparent
  );
  border-radius: 1px;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.footer__message {
  text-align: center;
}

.footer__tagline {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(90deg,
    rgba(255,223,138,.95),
    rgba(56,211,159,.78),
    rgba(255,77,90,.72),
    rgba(255,223,138,.95));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  color: transparent;
  animation: heartBeat 1.8s ease-in-out infinite, footerGlow 9s ease-in-out infinite;
}

.love-heart {
  display: inline-block;
  animation: heartPulse 1.5s ease-in-out infinite;
  color: #e60026;
  text-shadow:
    0 0 10px rgba(230,0,38,.35),
    0 0 18px rgba(255,77,90,.22);
  margin: 0 4px;
  font-size: 1.1em;
}

@keyframes heartBeat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

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

@keyframes footerShimmer {
  0% { transform: translateX(0); opacity: 0.35; }
  50% { transform: translateX(6%); opacity: 0.6; }
  100% { transform: translateX(12%); opacity: 0.35; }
}

@keyframes footerGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.footer__cta {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.footer__cta:hover {
  color: var(--gold);
  text-shadow:
    0 0 10px rgba(255,223,138,.35),
    0 0 18px rgba(255,77,90,.22);
}

.footer__credit {
  text-align: right;
}

.credit-label {
  opacity: 0.7;
  font-weight: 500;
}

.footer__artist {
  margin: 0;
  font-weight: 600;
  color: var(--gold-rich);
  font-size: 14px;
  border-bottom: 1px solid rgba(255,223,138,.3);
  padding-bottom: 4px;
  display: inline-block;
}


.footer__artist:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 10px 24px rgba(255,211,110,.18),
    0 14px 28px rgba(255,77,90,.12);
}

.footer__year {
  margin: 0;
  font-size: 13px;
  color: var(--gold);
  opacity: 0.6;
  letter-spacing: 1px;
}


.form-intro::before {
  content: "................................................................................................................................";
  display: block;
  margin-bottom: 6px;
  color: #ffd36e;
  opacity: 0.6;
}

.form-intro.deadline {
  position: relative;
  padding: 18px 20px;
  border-radius: 22px;

  background:
    radial-gradient(
      120% 140% at 10% 0%,
      rgba(255,223,138,.22),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(15,107,79,.85),
      rgba(7,31,24,.92)
    );

  border: 1px solid rgba(255,223,138,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18);

  font-size: 14.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 18px;
}

/* Highlight the date */
.form-intro.deadline strong {
  color: #ff6b6b;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,107,107,.45);
}


/* .form-intro.deadline strong {
  color: var(--red);
  font-weight: 900;
  text-shadow:
    0 0 12px rgba(255,59,59,.55),
    0 0 22px rgba(255,223,138,.35);
} */

.form-intro.deadline::before {
  content: "✦✦✦";
  display: block;
  margin-bottom: 8px;
  color: #e6bd44;
  opacity: 1;
  align-items: center;
}

/* === HERO TIME CHIP === */

.hero-meta {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.time-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(
    135deg,
    rgba(255,211,110,.18),
    rgba(255,77,90,.18)
  );
  border: 1px solid rgba(255,211,110,.45);
  color: #fff6dc;
  box-shadow:
    0 0 18px rgba(255,211,110,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Emphasise time */
.time-chip strong {
  color: #dbb63c;
  /* text-shadow:
    0 0 12px rgba(255,59,59,.75);
} */
}


/* Hover interaction */
.time-chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 26px rgba(255,211,110,.45),
    0 10px 30px rgba(0,0,0,.35);
}

/* Gentle pulse on load */
.time-chip {
  animation: timePulse 2.8s ease-in-out infinite;
}

@keyframes timePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(255,211,110,.25);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 28px rgba(255,107,107,.45);
  }
}



/* === HERO 3D INTERACTION === */

.hero {
  perspective: 1400px;
}

.hero__inner {
  /* DEFAULT = slanted */
  transform: rotateX(4deg) rotateY(-4deg) scale(1.02);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 60px rgba(255,223,138,.35);

  transition: transform 0.6s ease, box-shadow 0.6s ease;
  transform-style: preserve-3d;
}

/* HOVER = straight / normal */
.hero__inner:hover {
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 30px rgba(255,223,138,.18);
}

.hero__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px 180px at var(--x,50%) var(--y,50%),
    rgba(255,223,138,.25),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.hero__inner:hover::after {
  opacity: 1;
}

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}




/* === FORM HEADER ELEVATION === */

.form-header {
  text-align: center;
  margin-bottom: 16px;
}

.form-header h2 {
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a08533;
  /* text-shadow:
    0 0 14px rgba(255,223,138,.45); */
}

.form-header .spark {
  color: var(--red);
  margin: 0 6px;
  font-size: 18px;
  text-shadow:
    0 0 10px rgba(255,59,59,.55);
}

.form-header p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


.form-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-main);
}

.form-label--accent .emoji {
  filter: drop-shadow(0 0 6px rgba(255,211,110,.28));
  transform: translateY(1px);
}

.form-label--accent .text {
  opacity: .88; /* keeps it subtle, not too bright */
}

.form-label--accent .required {
  color: var(--red-soft);
  font-weight: 900;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form label span {
  font-size: 13.8px;
  color: var(--text-muted);
  display: inline-block;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(18, 92, 49, 0.88);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-main);
  font-size: 14px;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}


.form input::placeholder,
.form textarea::placeholder {
  font-style: italic;
  color: rgba(246,255,249,.55);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--gold-rich);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,223,138,.28);
}

.form input:hover,
.form select:hover,
.form textarea:hover {
  border-color: rgba(255,223,138,.45);
}

.form .row {
  display: grid;
  gap: 12px;
}

.form .row:not(.row--3) {
  margin-bottom: 4px;
}

.row--3 label {
  background: linear-gradient(
    180deg,
    rgba(15,107,79,.6),
    rgba(7,31,24,.75)
  );
  padding: 20px 12px 20px;
  border-radius: 18px;
  /* border: 1px solid rgba(255,255,255,.12); */
}

.form textarea {
  resize: vertical;
  min-height: 90px;
}

.form label:focus-within span {
  color: var(--gold-rich);
  text-shadow: 0 0 10px rgba(255,223,138,.35);
}

.actions--public {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
}


.btn--submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 26px;
  border-radius: 999px;
  background-color: #c29f2b;
/* 
  background: linear-gradient(
    135deg,
    var(--gold-rich),
    var(--gold),
    var(--red)
  ); */

  color: #041e0f;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  border: none;
  cursor: pointer;

  /* box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 30px rgba(255,223,138,.45); */

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

.btn--submit .btn-icon {
  font-size: 18px;
  transform: translateY(-1px);
  transition: transform .25s ease;
}

.btn--submit:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 26px 65px rgba(0,0,0,.55),
    0 0 45px rgba(255,59,59,.45);
  filter: brightness(1.05);
  color: var(--text);
  background: rgba(18, 92, 49, 0.88)
  
}

.btn--submit:hover .btn-icon {
  transform: rotate(-8deg) scale(1.15);
}

.btn--submit:active {
  transform: translateY(0) scale(1);
  box-shadow:
    0 12px 30px rgba(0,0,0,.4);
}

.submit-note {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.85;
}


.btn--submit .btn-icon {
  font-size: 16px;
  opacity: 0.85;
  transform: translateY(-1px);
  transition: transform .25s ease, opacity .25s ease;
}




.submit-note {
  font-size: 13px;
  font-style: italic;
  background: linear-gradient(
    90deg,
    var(--text-muted),
    var(--gold-rich),
    var(--text-muted)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}


/* Line icons for vibe cards */
.vibe-card__icon {
  color: var(--gold-rich);
}

.vibe-card__icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.vibe-card__icon .pip {
  fill: currentColor;
  stroke: none;
}

/* Accent per card on hover */
.vibe-card--games:hover .vibe-card__icon { color: var(--red); }
.vibe-card--movies:hover .vibe-card__icon { color: var(--green-vibrant); }
.vibe-card--food:hover   .vibe-card__icon { color: var(--gold-rich); }
.vibe-card--extras:hover .vibe-card__icon { color: var(--gold); }



.expect {
  margin-top: 40px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(15,107,79,.12) 0%, rgba(11,61,46,.18) 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(255,223,138,.12);
}

.expect__title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color:  #c29f2b;
  text-shadow: 0 0 20px rgba(255,223,138,.3);
}

.expect__title .sparkle {
  display: inline-block;
  animation: sparkleRotate 3s ease-in-out infinite;
}

.expect__title .sparkle:first-child {
  animation-delay: 0s;
}

.expect__title .sparkle:last-child {
  animation-delay: 1.5s;
}

@keyframes sparkleRotate {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.3);
    opacity: 0.7;
  }
}

/* Grid layout */
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

@media (max-width: 720px) {
  .vibe-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual vibe cards */
.vibe-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: rgba(15,47,36,.5);
  border-radius: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Animated gradient border on hover */
.vibe-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gold), var(--red), var(--green-vibrant));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.vibe-card:hover::before {
  opacity: 1;
}

.vibe-card:hover {
  transform: translateY(-6px) scale(1.02);
  background: rgba(15,47,36,.8);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

/* Icon styling */
.vibe-card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(255,223,138,.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.vibe-card:hover .vibe-card__icon {
  transform: rotate(12deg) scale(1.15);
  background: rgba(255,223,138,.25);
  box-shadow: 0 0 20px rgba(255,223,138,.3);
}

/* Content */
.vibe-card__content {
  flex: 1;
}

.vibe-card__content h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-rich);
  letter-spacing: 0.3px;
}

.vibe-card__content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.vibe-card__content strong {
  color: var(--text);
  font-weight: 700;
}

/* Individual card color accents */
.vibe-card--games:hover .vibe-card__icon {
  background: rgba(255,77,90,.2);
}

.vibe-card--movies:hover .vibe-card__icon {
  background: rgba(56,211,159,.2);
}

.vibe-card--food:hover .vibe-card__icon {
  background: rgba(255,223,138,.3);
}

.vibe-card--extras:hover .vibe-card__icon {
  background: linear-gradient(135deg, rgba(255,77,90,.2), rgba(255,223,138,.2));
}

/* Staggered animation on load */
.vibe-card {
  animation: vibeSlideIn 0.6s ease-out backwards;
}

.vibe-card:nth-child(1) { animation-delay: 0.1s; }
.vibe-card:nth-child(2) { animation-delay: 0.2s; }
.vibe-card:nth-child(3) { animation-delay: 0.3s; }
.vibe-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes vibeSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* === BUBBLE BURST FEEDBACK === */

@keyframes bubbleBurst {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* Glow ring on entry */
.bubble.burst {
  animation: bubbleBurst 0.6s cubic-bezier(.22,.61,.36,1);
  box-shadow:
    0 0 0 0 rgba(255,223,138,.55),
    0 12px 30px rgba(0,0,0,.35);
}

.bubble.burst::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(255,223,138,.55);
  animation: bubbleRipple 0.6s ease-out;
  pointer-events: none;
}

@keyframes bubbleRipple {
  from {
    transform: scale(0.8);
    opacity: 0.8;
  }
  to {
    transform: scale(1.2);
    opacity: 0;
  }
}




/* === STATUS MESSAGE (CENTERED & STYLED) === */

.status {
  margin-top: 16px;
  padding: 14px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,223,138,.15), rgba(56,211,159,.15));
  border: 1px solid rgba(255,223,138,.3);
  color: var(--gold-rich);
  text-shadow: 0 0 12px rgba(255,223,138,.2);
  transition: all 0.3s ease;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status:empty {
  display: none;
}

/* Success state animation */
.status:not(:empty) {
  animation: statusSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes statusSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Error state - applied via setStatus */
.status[data-kind="bad"] {
  background: linear-gradient(135deg, rgba(255,77,90,.15), rgba(255,180,185,.15));
  border-color: rgba(255,77,90,.4);
  color: rgba(255,180,185,.95);
  text-shadow: 0 0 12px rgba(255,77,90,.2);
}


.card__header--bubbles {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(15,107,79,.08) 0%, rgba(11,61,46,.12) 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(255,223,138,.15);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

/* Subtle sparkle background */
.card__header--bubbles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,223,138,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(56,211,159,.06) 0%, transparent 50%);
  pointer-events: none;
  animation: headerGlow 6s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Icon container */
.header-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: rgba(255,223,138,.12);
  border-radius: 16px;
  border: 2px solid rgba(255,223,138,.25);
  position: relative;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card__header--bubbles:hover .header-icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(255,223,138,.2);
  box-shadow: 0 8px 24px rgba(255,223,138,.2);
}

/* Snowman SVG icon */
.snowman-icon {
  width: 36px;
  height: 36px;
  stroke: #c29f2b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.snowman-icon .eye {
  fill: var(--gold-rich);
  stroke: none;
}

.snowman-icon .smile {
  stroke-width: 1.5;
}

.snowman-icon .arm {
  stroke-width: 1.6;
}

/* Header content */
.header-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.card__header--bubbles h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-main {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.header-accent {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: #a08533;
  text-shadow: none;
  display: inline-block;
  animation: headerAccentShimmer 3s ease-in-out infinite;
}

@keyframes headerAccentShimmer {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

.header-hint {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hint-icon {
  display: inline-block;
  font-size: 16px;
  animation: pointBounce 2s ease-in-out infinite;
}

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

/* Mobile adjustments */
@media (max-width: 600px) {
  .card__header--bubbles {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }

  .header-content h2 {
    align-items: center;
  }

  .header-hint {
    justify-content: center;
  }

  .header-accent {
    font-size: 24px;
  }
}