/*
  Sample birthday page ("Hey Aarya"). This is the studio's own example of an
  occasion website, kept as it was designed. Three things were changed so it
  can live on the main site: the styles and script were moved out of the page
  into this file and js/birthday.js, the fonts are served from this site, and
  the two pointer pictures became files in assets/demo/.
*/

@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap; src:url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400 900; font-display:swap; src:url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap; src:url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 700; font-display:swap; src:url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }

:root {
  --rose: #E8547A;
  --rose-deep: #C63B61;
  --rose-pale: #FFD6E0;
  --rose-blush: #FFF0F4;
  --lavender: #C4A8D8;
  --lavender-pale: #EDE4F5;
  --gold: #E8C66A;
  --gold-pale: #FDF4DC;
  --cream: #FDFAF7;
  --ink: #2C1A25;
  --ink-soft: #6B4459;
  --mist: rgba(255,255,255,0.7);
  --glass: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.8);
  --shadow: 0 32px 80px rgba(200,80,120,0.18);
  --shadow-deep: 0 48px 120px rgba(180,60,100,0.28);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.19,1,0.22,1);
  --r: 28px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  min-height:100vh;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background: #FDF6FA;
  overflow-x:hidden;
}

/* ---- AMBIENT BACKGROUND ---- */
.ambient {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 800px 600px at 10% 5%, rgba(232,84,122,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 90% 10%, rgba(196,168,216,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 700px 700px at 50% 100%, rgba(232,198,106,0.10) 0%, transparent 60%),
    #FDF6FA;
}

/* FLOATING PARTICLES */
.particles-layer {
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.particle {
  position:absolute;
  border-radius:50%;
  opacity:0;
  animation: particleDrift var(--dur, 12s) var(--delay,0s) ease-in-out infinite;
}
@keyframes particleDrift {
  0%{transform:translateY(0) translateX(0) scale(0.8);opacity:0;}
  15%{opacity:var(--op,0.6);}
  85%{opacity:var(--op,0.4);}
  100%{transform:translateY(-80vh) translateX(var(--dx,30px)) scale(1.1);opacity:0;}
}

/* STAR TWINKLE */
.star {
  position:absolute;
  background:white;
  border-radius:50%;
  opacity:0;
  animation:starTwinkle var(--dur,3s) var(--delay,0s) ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100%{opacity:0;transform:scale(0.5);}
  50%{opacity:var(--op,0.9);transform:scale(1);}
}

/* ---- APP SHELL ---- */
.app {position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}

.screen {
  width:min(1100px,100%);
  display:none;
  align-items:center;
  justify-content:center;
}
.screen.active {
  display:flex;
  animation:screenEnter 800ms var(--ease-smooth) both;
}
@keyframes screenEnter {
  from{opacity:0;transform:translateY(24px) scale(0.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.panel {
  width:100%;
  border-radius:40px;
  padding:clamp(28px,5vw,64px);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(30px);
  box-shadow:var(--shadow);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.panel-glow {
  position:absolute;inset:0;pointer-events:none;border-radius:40px;
  background:radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,0.6), transparent);
}

.back-btn {
  position:absolute;top:22px;left:22px;z-index:20;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  border-radius:999px;
  padding:9px 18px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all 300ms var(--ease-smooth);
}
.back-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(200,80,120,0.15);}

/* TYPOGRAPHY */
.display {
  font-family:'Playfair Display',serif;
  font-size:clamp(52px,8vw,104px);
  font-weight:400;
  line-height:1.0;
  color:var(--rose);
  letter-spacing:-0.02em;
}
.display em{font-style:italic;color:var(--rose-deep);}

.heading {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(36px,5vw,64px);
  font-weight:400;
  line-height:1.1;
  color:var(--rose-deep);
}
.heading em{font-style:italic;}

.subhead {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(18px,2.5vw,26px);
  font-weight:300;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.6;
}
.body-text {
  font-size:clamp(14px,1.6vw,17px);
  color:var(--ink-soft);
  line-height:1.8;
  font-weight:300;
}

.kicker {
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(232,84,122,0.08);
  border:1px solid rgba(232,84,122,0.2);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:18px;
  animation:kickerPop 600ms 300ms var(--ease-spring) both;
}
@keyframes kickerPop {
  from{opacity:0;transform:scale(0.8) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

/* BUTTONS */
.btn {
  border:0;outline:none;cursor:pointer;
  border-radius:999px;
  padding:15px 32px;
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:15px;
  transition:all 300ms var(--ease-spring);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.btn::before {
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,0.2),transparent);
  pointer-events:none;
}
.btn-primary {
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  color:white;
  box-shadow:0 16px 40px rgba(200,60,100,0.35),0 4px 12px rgba(200,60,100,0.2);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 24px 50px rgba(200,60,100,0.4);}
.btn-secondary {
  background:rgba(255,255,255,0.75);
  color:var(--rose);
  border:1px solid rgba(232,84,122,0.25);
  box-shadow:0 8px 24px rgba(200,80,120,0.1);
}
.btn-secondary:hover{transform:translateY(-3px);background:white;box-shadow:0 16px 36px rgba(200,80,120,0.16);}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none!important;}

.btn-row {
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:32px;
}

.reveal-btn {
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(12px);
  transition:all 500ms var(--ease-smooth);
}
.reveal-btn.show {
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
}

/* ===== INTRO SCREEN ===== */
.intro-inner {
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:20px 0;
}

.cat-frame {
  position:relative;
  width:min(260px,72vw);
  margin-bottom:28px;
  animation:catBob 5s ease-in-out infinite;
}
@keyframes catBob {
  0%,100%{transform:translateY(0) rotate(-1.5deg);}
  50%{transform:translateY(-10px) rotate(1.5deg);}
}
.cat-frame img {
  width:100%;
  border-radius:36px;
  display:block;
  position:relative;z-index:2;
  box-shadow:0 24px 60px rgba(200,80,120,0.25),0 8px 20px rgba(200,80,120,0.12);
}
.cat-aura {
  position:absolute;inset:-12px;border-radius:48px;z-index:1;
  background:conic-gradient(from 0deg,var(--rose-pale),var(--lavender-pale),var(--gold-pale),var(--rose-pale));
  filter:blur(20px);
  opacity:0.7;
  animation:auraRotate 6s linear infinite;
}
@keyframes auraRotate {
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* Floating hearts around cat */
.heart-float {
  position:absolute;
  font-size:var(--size,18px);
  animation:heartFloat var(--dur,3s) var(--delay,0s) ease-in-out infinite;
  pointer-events:none;z-index:3;
  filter:drop-shadow(0 4px 8px rgba(232,84,122,0.3));
}
@keyframes heartFloat {
  0%,100%{transform:translateY(0) rotate(var(--rot,-10deg)) scale(1);opacity:0.7;}
  50%{transform:translateY(-14px) rotate(var(--rot2,10deg)) scale(1.1);opacity:1;}
}

.mini-msg {
  min-height:28px;font-size:14px;font-weight:500;color:var(--rose);
  margin-top:8px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;
}

/* ===== SWITCH SCREEN ===== */
.switch-world {
  position:relative;overflow:hidden;border-radius:32px;
  min-height:560px;
  background:linear-gradient(180deg,#0D0A14 0%,#1A1326 100%);
  transition:background 1400ms var(--ease-smooth);
  display:flex;align-items:center;justify-content:center;
}
.switch-world.lit {
  background:linear-gradient(180deg,#FFF9FC 0%,#FFE6F0 60%,#F5EEFF 100%);
}

/* Stars in dark room */
.room-stars {
  position:absolute;inset:0;pointer-events:none;z-index:1;
  transition:opacity 800ms ease;
}
.switch-world.lit .room-stars {opacity:0;}
.room-star {
  position:absolute;background:white;border-radius:50%;
  animation:roomStar var(--d,2s) var(--dl,0s) ease-in-out infinite;
}
@keyframes roomStar {
  0%,100%{opacity:0.1;}
  50%{opacity:0.9;}
}

/* Lamp */
.lamp-wire {
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:3px;height:110px;
  background:linear-gradient(180deg,rgba(180,150,170,0.4),rgba(200,170,190,0.8));
  z-index:3;
}
.lamp-shade {
  position:absolute;top:95px;left:50%;transform:translateX(-50%);
  width:100px;height:50px;z-index:3;
  filter:drop-shadow(0 0 30px rgba(255,220,120,0));
  transition:filter 1200ms var(--ease-smooth);
}
.switch-world.lit .lamp-shade {
  filter:drop-shadow(0 0 60px rgba(255,235,140,0.9)) drop-shadow(0 0 120px rgba(255,235,140,0.5));
}
.lamp-bulb {
  position:absolute;top:138px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;z-index:4;
  background:#888;
  transition:all 1000ms var(--ease-smooth);
}
.switch-world.lit .lamp-bulb {
  background:#FFF8D0;
  box-shadow:0 0 20px 10px rgba(255,240,160,0.9),0 0 60px 20px rgba(255,230,100,0.6),0 0 120px 40px rgba(255,210,80,0.3);
}
.light-cone {
  position:absolute;top:155px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:280px solid transparent;
  border-right:280px solid transparent;
  border-top:0px solid transparent;
  pointer-events:none;z-index:2;
  opacity:0;
  transition:opacity 1200ms var(--ease-smooth),border-bottom 1200ms var(--ease-smooth);
}
.switch-world.lit .light-cone {
  opacity:1;
  border-bottom:420px solid rgba(255,240,160,0.07);
}

/* Light particles burst */
.light-particle {
  position:absolute;border-radius:50%;
  animation:lpFloat var(--d,4s) var(--dl,0s) ease-out forwards;
  opacity:0;pointer-events:none;z-index:5;
}
@keyframes lpFloat {
  0%{opacity:0;transform:translate(-50%,-50%) scale(0);}
  30%{opacity:0.9;}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx,40px)), calc(-50% + var(--ty,-60px))) scale(0.5);}
}

.switch-inner {
  position:relative;z-index:6;
  width:min(500px,90%);
  padding:36px 32px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.06);
  transition:all 1000ms var(--ease-smooth);
  text-align:center;
}
.switch-world.lit .switch-inner {
  background:rgba(255,255,255,0.72);
  border-color:rgba(255,255,255,0.9);
  box-shadow:0 24px 60px rgba(200,80,120,0.14);
}

.switch-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(38px,5vw,58px);
  color:rgba(255,255,255,0.9);
  line-height:1.1;
  margin-bottom:10px;
  transition:color 1000ms ease;
}
.switch-world.lit .switch-title {color:var(--rose-deep);}
.switch-sub {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:rgba(255,255,255,0.55);
  font-size:18px;
  transition:color 1000ms ease;
  margin-bottom:28px;
}
.switch-world.lit .switch-sub {color:var(--ink-soft);}

/* Beautiful toggle */
.toggle-wrap {
  display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px;
}
.toggle {
  width:100px;height:52px;border-radius:999px;
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.2);
  position:relative;cursor:pointer;
  transition:all 500ms var(--ease-smooth);
}
.switch-world.lit .toggle {
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  border-color:transparent;
  box-shadow:0 8px 28px rgba(200,60,100,0.4);
}
.toggle-ball {
  position:absolute;top:5px;left:5px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:all 500ms var(--ease-spring);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.switch-world.lit .toggle-ball {
  left:53px;
  background:white;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.toggle-label {
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,0.5);
  transition:color 1000ms ease;min-width:70px;text-align:left;
}
.switch-world.lit .toggle-label {color:var(--rose);}

/* ===== DECORATE SCREEN ===== */
.decorate-world {
  position:relative;min-height:580px;overflow:hidden;border-radius:32px;
  background:linear-gradient(180deg,#FFF9FC,#FFE8F3 60%,#F7EEFF);
}

/* Banner */
.party-banner {
  position:absolute;top:-200px;left:0;right:0;z-index:8;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:20px;height:110px;
  background:linear-gradient(135deg,#E8547A,#C63B61);
  transition:top 1200ms var(--ease-smooth);
}
.party-banner.show{top:0;}
.banner-text {
  font-family:'Playfair Display',serif;
  font-size:clamp(22px,3.5vw,42px);
  color:white;
  font-weight:700;
  letter-spacing:0.08em;
  text-shadow:0 2px 20px rgba(0,0,0,0.15);
}
.banner-shimmer {
  position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  animation:bannerShimmer 2.5s 1.5s ease-in-out infinite;
}
@keyframes bannerShimmer {
  from{left:-100%;}
  to{left:200%;}
}

/* Garland */
.garland-svg {
  position:absolute;top:90px;left:0;right:0;z-index:7;
  opacity:0;transform:translateY(-8px);
  transition:all 900ms var(--ease-smooth) 400ms;
}
.garland-svg.show{opacity:1;transform:translateY(0);}

/* Balloons */
.balloon {
  position:absolute;z-index:6;opacity:0;
  transform:translateY(20px);
  transition:all 900ms var(--ease-spring);
}
.balloon svg {filter:drop-shadow(0 16px 24px rgba(200,80,120,0.2));}
.decorate-world.decorated .balloon {
  opacity:1;transform:translateY(0);
  animation:balloonFloat var(--dur,6s) var(--delay,0s) ease-in-out infinite;
}
@keyframes balloonFloat {
  0%,100%{transform:translateY(0) rotate(var(--rot,-2deg));}
  50%{transform:translateY(-16px) rotate(var(--rot2,2deg));}
}

.b1{left:5%;top:130px;--dur:5.5s;--delay:0s;--rot:-3deg;--rot2:2deg;}
.b2{right:6%;top:140px;--dur:6.2s;--delay:0.4s;--rot:2deg;--rot2:-3deg;}
.b3{left:14%;bottom:80px;--dur:5.8s;--delay:0.8s;--rot:-2deg;--rot2:3deg;}
.b4{right:14%;bottom:70px;--dur:6.5s;--delay:1.2s;--rot:3deg;--rot2:-2deg;}
.b5{left:2%;bottom:200px;--dur:7s;--delay:0.3s;--rot:-4deg;--rot2:2deg;}
.b6{right:2%;bottom:190px;--dur:6.8s;--delay:0.6s;--rot:2deg;--rot2:-4deg;}

/* Sparkles */
.sparkle {
  position:absolute;pointer-events:none;z-index:9;
  opacity:0;
  animation:sparkleAnim var(--d,1.5s) var(--dl,0s) ease-in-out infinite;
}
@keyframes sparkleAnim {
  0%,100%{opacity:0;transform:scale(0) rotate(0deg);}
  50%{opacity:1;transform:scale(1) rotate(180deg);}
}

.decorate-content {
  position:relative;z-index:10;
  max-width:640px;margin:170px auto 0;
  text-align:center;padding:0 20px;
}
.fine-line {
  width:100px;height:1px;margin:20px auto 22px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent);
}

/* ===== CAKE SCREEN ===== */
.cake-stage {
  min-height:520px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:20px 0;
}

.cake-scene {
  position:relative;display:flex;flex-direction:column;align-items:center;
  margin:20px 0;
}

/* Candles */
.candles-row {
  position:relative;z-index:5;display:flex;gap:14px;
  margin-bottom:-8px;
}
.candle-wrap {position:relative;display:flex;flex-direction:column;align-items:center;}
.candle-body {
  width:14px;height:56px;border-radius:8px 8px 6px 6px;
  background:repeating-linear-gradient(160deg,#fff 0 8px,#FFB7D0 8px 16px);
  box-shadow:inset -3px 0 6px rgba(0,0,0,0.05),0 4px 14px rgba(200,80,120,0.1);
  position:relative;
}
.wick {
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:2.5px;height:10px;border-radius:2px;
  background:linear-gradient(180deg,#4A2535,#7A4A60);
}

/* Flame */
.flame-wrap {
  position:absolute;top:-36px;left:50%;transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;
  width:30px;height:46px;
}
.flame-outer {
  position:absolute;bottom:0;
  width:20px;height:32px;
  border-radius:50% 50% 45% 45% / 58% 58% 42% 42%;
  background:radial-gradient(ellipse at 50% 80%,#FF9A3C 0%,#FF6B35 30%,#E8547A 80%,transparent 100%);
  filter:blur(2px);
  transform-origin:bottom center;
  opacity:0;transform:scale(0);
  transition:opacity 400ms,transform 400ms var(--ease-spring);
}
.flame-inner {
  position:absolute;bottom:4px;
  width:10px;height:20px;
  border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%,#FFF9C4 0%,#FFE566 35%,#FFAA33 80%,transparent 100%);
  z-index:2;
  opacity:0;transform:scale(0);
  transition:opacity 400ms,transform 400ms var(--ease-spring);
}
.flame-core {
  position:absolute;bottom:6px;
  width:5px;height:12px;
  border-radius:50%;
  background:white;
  z-index:3;opacity:0;
  transition:opacity 400ms;
}

.cake-lit .flame-outer {
  opacity:1;transform:scale(1);
  animation:flameFlicker 0.9s ease-in-out infinite alternate;
}
.cake-lit .flame-inner {opacity:1;transform:scale(1);animation:flameFlickerInner 0.7s ease-in-out infinite alternate;}
.cake-lit .flame-core {opacity:0.9;}

@keyframes flameFlicker {
  from{transform:scale(1) rotate(-3deg) skewX(-3deg);}
  to{transform:scale(1.1) rotate(3deg) skewX(3deg);}
}
@keyframes flameFlickerInner {
  from{transform:scale(1) rotate(-4deg);}
  to{transform:scale(1.05) rotate(4deg);}
}

/* Glow from candles */
.candle-glow {
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,80,0.35),transparent 70%);
  pointer-events:none;z-index:4;
  opacity:0;transition:opacity 600ms ease;
}
.cake-lit .candle-glow {opacity:1;}

/* Smoke */
.smoke-puff {
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:rgba(180,160,170,0.3);
  opacity:0;pointer-events:none;
}
.cake-blown .smoke-puff {
  animation:smokePuff 2s ease-out forwards;
}
@keyframes smokePuff {
  0%{opacity:0.7;transform:translateX(-50%) translateY(0) scale(0.5);}
  50%{opacity:0.4;transform:translateX(calc(-50% + var(--sx,5px))) translateY(-22px) scale(1.6);}
  100%{opacity:0;transform:translateX(calc(-50% + var(--sx,10px))) translateY(-44px) scale(2.2);}
}

/* Wish particles */
.wish-particle {
  position:absolute;
  font-size:var(--s,14px);
  animation:wishFloat 2s var(--d,0s) ease-out forwards;
  pointer-events:none;z-index:20;opacity:0;
}
@keyframes wishFloat {
  0%{opacity:1;transform:translateY(0) translateX(0) rotate(0deg);}
  100%{opacity:0;transform:translateY(-120px) translateX(var(--x,20px)) rotate(var(--r,30deg));}
}

/* CAKE SVG */
.cake-svg-wrap {
  position:relative;
  filter:drop-shadow(0 24px 40px rgba(200,80,120,0.18));
}

/* ===== GIFTS ===== */
.gift-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:32px;
}
.gift-card {
  padding:28px 16px;
  border-radius:28px;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(232,84,122,0.12);
  box-shadow:0 12px 32px rgba(200,80,120,0.08);
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  position:relative;overflow:hidden;
  transition:all 400ms var(--ease-spring);
  animation:giftIn 600ms calc(var(--i,0)*100ms) var(--ease-spring) both;
}
@keyframes giftIn {
  from{opacity:0;transform:translateY(24px) scale(0.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.gift-card::before {
  content:'';position:absolute;inset:0;border-radius:28px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(232,84,122,0.12),transparent);
  opacity:0;transition:opacity 400ms ease;
}
.gift-card:hover {
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 28px 60px rgba(200,80,120,0.2);
  background:white;
}
.gift-card:hover::before{opacity:1;}
.gift-icon {
  width:90px;height:90px;
  border-radius:24px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--rose-blush),white);
  border:1px solid rgba(232,84,122,0.1);
  position:relative;z-index:1;
}
.gift-label {
  font-family:'Playfair Display',serif;
  font-size:18px;color:var(--rose-deep);
  position:relative;z-index:1;
}
.gift-desc {
  font-size:13px;color:var(--ink-soft);line-height:1.5;
  text-align:center;max-width:160px;
  position:relative;z-index:1;
}

/* ===== GALLERY ===== */
.gallery-wrap {
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:36px;align-items:center;
  margin-top:24px;
  text-align:left;
}
.photo-frame {
  position:relative;
  border-radius:32px;
  padding:10px;
  background:linear-gradient(135deg,#FFE2EE,#FFFFFF,#EDE4F5);
  box-shadow:0 24px 60px rgba(200,80,120,0.16);
  transform:rotate(-2deg);
}
.photo-window {
  overflow:hidden;border-radius:24px;aspect-ratio:4/5;background:#fff;
}
.slides-track {
  height:100%;display:flex;
  transition:transform 700ms var(--ease-smooth);
}
.slide {
  min-width:100%;height:100%;position:relative;
}
.slide img {
  width:100%;height:100%;object-fit:cover;display:block;
}
.slide-overlay {
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(30,10,20,0.7) 0%,transparent 100%);
  padding:30px 16px 14px;
}
.slide-caption {
  color:white;font-family:'Cormorant Garamond',serif;
  font-size:16px;font-style:italic;font-weight:300;line-height:1.4;
}
.photo-nav {
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
}
.nav-btn {
  pointer-events:auto;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.9);
  color:var(--rose);font-size:22px;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
  transition:all 280ms var(--ease-spring);
}
.nav-btn:hover{transform:scale(1.1);background:white;}
.slide-dots {
  display:flex;justify-content:center;gap:7px;margin-top:12px;
}
.slide-dot {
  width:7px;height:7px;border-radius:50%;
  background:rgba(200,80,120,0.2);border:0;cursor:pointer;
  transition:all 300ms var(--ease-spring);
}
.slide-dot.active{width:22px;border-radius:999px;background:var(--rose);}

.gallery-text {padding-left:8px;}
.message-card {
  margin-top:20px;padding:22px;border-radius:24px;
  background:rgba(255,240,246,0.7);
  border:1px solid rgba(232,84,122,0.12);
  box-shadow:0 12px 28px rgba(200,80,120,0.07);
}

/* ===== BOUQUET ===== */
.bouquet-stage {
  position:relative;min-height:560px;overflow:hidden;
  border-radius:28px;
  background:radial-gradient(ellipse at 50% 20%,rgba(255,220,235,0.5),transparent 50%),
             linear-gradient(180deg,#FFF9FC,#FFE8F3 60%,#F7EEFF);
  border:1px solid rgba(255,255,255,0.7);
}

.bouquet-svg {
  position:absolute;left:50%;top:54%;
  width:min(340px,68vw);
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 30px 40px rgba(200,80,120,0.2));
  animation:bouquetBreath 5.5s ease-in-out infinite;
  z-index:2;
}
@keyframes bouquetBreath {
  0%,100%{transform:translate(-50%,-50%) rotate(-1deg) scale(1);}
  50%{transform:translate(-50%,-53%) rotate(1deg) scale(1.02);}
}

.float-card {
  position:absolute;z-index:4;
  width:170px;padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.9);
  backdrop-filter:blur(16px);
  box-shadow:0 12px 30px rgba(200,80,120,0.1);
  animation:cardFloat var(--dur,5s) var(--delay,0s) ease-in-out infinite;
}
@keyframes cardFloat {
  0%,100%{transform:translateY(0) rotate(var(--r,-1deg));}
  50%{transform:translateY(-12px) rotate(var(--r2,1deg));}
}
.float-card strong {
  display:block;font-family:'Playfair Display',serif;
  font-size:13px;color:var(--rose);margin-bottom:4px;
}
.float-card p {font-size:12px;color:var(--ink-soft);line-height:1.55;}
.fc1{left:3%;top:8%;--dur:5.2s;--delay:0s;--r:-2deg;--r2:1deg;}
.fc2{right:3%;top:6%;--dur:6s;--delay:0.5s;--r:2deg;--r2:-1deg;}
.fc3{left:4%;bottom:12%;--dur:5.8s;--delay:1s;--r:-1deg;--r2:2deg;}
.fc4{right:4%;bottom:10%;--dur:6.2s;--delay:1.5s;--r:1deg;--r2:-2deg;}
.fc5{left:38%;top:2%;--dur:5.5s;--delay:2s;--r:-1.5deg;--r2:1.5deg;}
.fc6{left:37%;bottom:2%;--dur:6.5s;--delay:2.5s;--r:1deg;--r2:-1deg;}

/* Petals */
.petal {
  position:absolute;pointer-events:none;
  animation:petalDrift var(--d,9s) var(--dl,0s) linear infinite;
  opacity:0;z-index:1;
}
@keyframes petalDrift {
  0%{transform:translateY(-40px) rotate(0deg);opacity:0;}
  8%{opacity:0.7;}
  90%{opacity:0.4;}
  100%{transform:translateY(600px) rotate(420deg);opacity:0;}
}

/* ===== ENVELOPE - REAL LETTER OPENING FIX ===== */
#envelopeScreen .panel {
  overflow: visible;
}

#envelopeScreen.envelope-active .kicker,
#envelopeScreen.envelope-active .heading,
#envelopeScreen.envelope-active .subhead {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}

#envelopeScreen .kicker,
#envelopeScreen .heading,
#envelopeScreen .subhead {
  transition: opacity 450ms ease, transform 450ms var(--ease-smooth);
}

.env-stage {
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 70px 0 30px;
  overflow: visible;
}

.envelope {
  width: min(420px, 88vw);
  height: 270px;
  position: relative;
  cursor: pointer;
  perspective: 1400px;
  filter: drop-shadow(0 28px 40px rgba(200,80,120,0.2));
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform 900ms var(--ease-smooth);
}

.envelope.open {
  transform: translateY(122px);
}

.env-body {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(170deg,#FFE8F0,#FFD0E2);
  border: 1px solid rgba(232,84,122,0.2);
  z-index: 1;
}

/* Pocket hides the folded letter before opening, then lets it rise out */
.env-pocket-mask {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
  transition: overflow 0ms linear 650ms, z-index 0ms linear 650ms;
}

.envelope.open .env-pocket-mask {
  overflow: visible;
  z-index: 14;
}

/* Letter starts folded and tucked inside */
.letter-card {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 88%;
  max-height: 420px;
  transform:
    translateX(-50%)
    translateY(92px)
    rotateX(72deg)
    scaleY(0.42);
  transform-origin: bottom center;
  z-index: 3;
  border-radius: 18px;
  padding: 24px 26px;
  background: linear-gradient(170deg,#FFFDF9,#FFF5F8);
  box-shadow: 0 18px 36px rgba(100,40,60,0.12);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition:
    transform 1100ms var(--ease-smooth),
    opacity 500ms ease;
}

/* Fold line */
.letter-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,59,97,0.18), transparent);
  opacity: 0.5;
}

/* Gentle paper sheen */
.letter-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.7),
    transparent 28%,
    rgba(232,84,122,0.035) 52%,
    transparent 72%
  );
  pointer-events: none;
}

.envelope.open .letter-card {
  opacity: 1;
  z-index: 20;
  transform:
    translateX(-50%)
    translateY(-268px)
    rotateX(0deg)
    scaleY(1);
  pointer-events: auto;
  transition-delay: 520ms;
}

/* Wax seal */
.wax-seal {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  z-index: 18;
  background: radial-gradient(circle at 40% 35%,#E8547A,#8B1A36);
  box-shadow: 0 6px 18px rgba(139,26,54,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  font-size: 22px;
  transition: all 500ms var(--ease-smooth);
}

.envelope.open .wax-seal {
  transform: translateX(-50%) translateY(-18px) scale(0.75);
  opacity: 0;
}

/* Top flap opens backward before the letter rises */
.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 58%;
  clip-path: polygon(0 0,100% 0,50% 100%);
  transform-origin: top center;
  background: linear-gradient(160deg,#F9B2CC,#E8547A);
  border-radius: 20px 20px 0 0;
  z-index: 12;
  transition:
    transform 850ms var(--ease-smooth),
    z-index 0ms linear 650ms;
  backface-visibility: hidden;
}

.envelope.open .env-flap {
  transform: rotateX(178deg);
  z-index: 2;
}

/* Envelope front folds */
.env-left {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #FFD0E1;
  clip-path: polygon(0 0,52% 52%,0 100%);
  border-radius: 20px 0 0 20px;
}

.env-right {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #FFC0D5;
  clip-path: polygon(100% 0,48% 52%,100% 100%);
  border-radius: 0 20px 20px 0;
}

.env-bottom {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: linear-gradient(160deg,#F9A8C3,#F48CB1);
  clip-path: polygon(0 100%,50% 45%,100% 100%);
  border-radius: 0 0 20px 20px;
}

.letter-salutation {
  font-family: 'Playfair Display',serif;
  font-size: 28px;
  font-style: italic;
  color: var(--rose);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.letter-body {
  font-size: 13.2px;
  line-height: 1.68;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}

.letter-sig {
  margin-top: 14px;
  font-family: 'Playfair Display',serif;
  font-size: 20px;
  font-style: italic;
  color: var(--rose-deep);
  position: relative;
  z-index: 1;
}

.env-open-btn {
  transition: transform 700ms var(--ease-smooth), opacity 400ms ease;
}

.envelope.open + .env-open-btn {
  transform: translateY(98px);
}

/* Mobile fix */
@media (max-width: 600px) {
  .env-stage {
    min-height: 690px;
    padding-top: 80px;
  }

  .envelope {
    width: min(340px, 88vw);
    height: 220px;
  }

  .envelope.open {
    transform: translateY(130px);
  }

  .letter-card {
    width: 92%;
    padding: 20px 18px;
    max-height: 430px;
  }

  .envelope.open .letter-card {
    transform:
      translateX(-50%)
      translateY(-292px)
      rotateX(0deg)
      scaleY(1);
  }

  .letter-body {
    font-size: 12.2px;
    line-height: 1.55;
  }

  .letter-salutation {
    font-size: 24px;
  }

  .envelope.open + .env-open-btn {
    transform: translateY(110px);
  }
}


/* ===== MYSTERY ===== */
.mystery-box {
  width:min(520px,100%);margin:28px auto 0;
  padding:30px;border-radius:30px;
  background:rgba(255,248,252,0.8);
  border:1px solid rgba(232,84,122,0.12);
  box-shadow:0 16px 48px rgba(200,80,120,0.1);
}
.lock-icon {
  font-size:52px;margin:0 auto 20px;
  animation:lockPulse 2s ease-in-out infinite;
  display:block;
}
@keyframes lockPulse {
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05) rotate(3deg);}
}
.pw-input {
  width:100%;border-radius:999px;
  padding:14px 22px;
  font-family:'DM Sans',sans-serif;font-size:15px;
  border:2px solid rgba(232,84,122,0.18);
  background:rgba(255,255,255,0.9);
  outline:none;color:var(--ink);text-align:center;
  letter-spacing:0.1em;
  transition:all 300ms ease;margin:16px 0 14px;
}
.pw-input:focus {
  border-color:var(--rose);
  box-shadow:0 0 0 6px rgba(232,84,122,0.1);
}
.pw-error {min-height:22px;font-size:13.5px;color:var(--rose);font-weight:500;}

.secret-reveal {
  display:none;margin-top:22px;padding:26px;border-radius:24px;
  background:white;border:1px solid rgba(232,84,122,0.12);
  animation:screenEnter 500ms var(--ease-smooth) both;
  text-align:left;
}
.secret-reveal.show{display:block;}
.secret-title {
  font-family:'Playfair Display',serif;font-size:36px;
  font-style:italic;color:var(--rose);margin-bottom:12px;
}

/* Unlock animation */
.lock-unlocked {animation:lockOpen 0.5s var(--ease-spring) forwards!important;}
@keyframes lockOpen {
  0%{transform:scale(1);}
  40%{transform:scale(1.3) rotate(-8deg);}
  70%{transform:scale(1.1) rotate(5deg);}
  100%{transform:scale(1) rotate(0deg);}
}

/* CONFETTI */
.confetti-layer {
  position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden;
}
.cp {
  position:absolute;top:-20px;
  animation:cpFall var(--d,3.5s) var(--dl,0s) linear forwards;
  border-radius:var(--br,3px);
}
@keyframes cpFall {
  to{transform:translateY(110vh) rotate(var(--spin,720deg)) translateX(var(--sx,0px));opacity:0.8;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
  .gift-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-wrap{grid-template-columns:1fr;text-align:center;}
  .photo-frame{max-width:400px;margin:0 auto;}
  .gallery-text{padding-left:0;text-align:center;}
  .bouquet-stage{min-height:800px;}
  .fc1,.fc2{top:4%;}
  .fc3,.fc4{bottom:8%;}
  .fc5{top:24%;}
  .fc6{bottom:0%;}
}
@media (max-width:600px) {
  .app{padding:12px 10px 60px;}
  .panel{padding:24px 16px;}
  .gift-grid{grid-template-columns:1fr;}
  .switch-world,.decorate-world{min-height:600px;}
  .decorate-content{margin-top:185px;}
  .float-card {
    width:80%;
    left:50%!important;right:auto!important;
    transform:translateX(-50%);
  }
  .fc1{top:0%;}
  .fc2{top:110px;}
  .fc3{top:220px;bottom:auto;}
  .fc4{top:610px;bottom:auto;}
  .fc5{top:720px;bottom:auto;}
  .fc6{top:830px;bottom:auto;}
  .bouquet-stage{min-height:960px;}
  .bouquet-svg{top:44%;width:min(280px,76vw);}
}


/* ===== FINAL REQUESTED POLISH ===== */
html, body, * {
  cursor: url("../assets/demo/cursor-1.svg") 4 4, auto;
}
button, .btn, .gift-card, .toggle, .envelope, .nav-btn, .slide-dot, .home-btn {
  cursor: url("../assets/demo/cursor-2.svg") 4 4, pointer !important;
}
.app { padding:20px 20px 96px !important; }
.panel {
  padding-top: clamp(74px, 7vw, 96px) !important;
  border-radius: 40px !important;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,0.58), transparent), var(--glass) !important;
  backdrop-filter: blur(30px) saturate(1.08) !important;
}
.panel::before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:48px;
  border-radius:40px 40px 0 0;
  border-bottom:1px solid rgba(232,84,122,0.12);
  background:
    radial-gradient(circle at 28px 24px, #ff5f57 0 6px, transparent 6.5px),
    radial-gradient(circle at 52px 24px, #ffbd2e 0 6px, transparent 6.5px),
    radial-gradient(circle at 76px 24px, #28c840 0 6px, transparent 6.5px),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.48));
  z-index:30;
  pointer-events:none;
}
.back-btn { top:62px !important; }
.home-btn {
  position:fixed;left:50%;bottom:22px;top:auto;right:auto;
  transform:translateX(-50%);
  width:58px;height:58px;border-radius:50%;padding:0;
  display:grid;place-items:center;z-index:99999;
  border:1px solid rgba(232,84,122,.24);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 46px rgba(200,80,120,.22),0 0 34px rgba(232,84,122,.22);
  transition:all 300ms var(--ease-spring);
}
.home-btn svg{width:29px;height:29px;fill:none;stroke:var(--rose-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.home-btn:hover{transform:translateX(-50%) translateY(-4px) scale(1.07);background:#fff;box-shadow:0 26px 60px rgba(200,80,120,.30),0 0 48px rgba(232,84,122,.28);}
.gift-grid{grid-template-columns:repeat(2,minmax(158px,218px)) !important;justify-content:center;gap:24px !important;margin-top:34px !important;}
.gift-card{aspect-ratio:1/1;min-height:0 !important;padding:24px !important;justify-content:center !important;gap:0 !important;border-radius:32px !important;}
.gift-label,.gift-desc{display:none !important;}
.gift-icon{width:128px !important;height:128px !important;border-radius:32px !important;}
.gift-icon svg{width:92px !important;height:92px !important;}
.gift-card:hover,.btn:hover:not(:disabled),.nav-btn:hover,.back-btn:hover{box-shadow:0 34px 78px rgba(200,80,120,.26),0 0 42px rgba(232,84,122,.23),0 0 0 1px rgba(255,255,255,.75) !important;}
.screen.active .panel{animation:finalPanelIn 760ms var(--ease-smooth) both;}
@keyframes finalPanelIn{from{opacity:0;transform:translateY(24px) scale(.97);filter:blur(8px);}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}
/* prevent cake text/candle overlap while preserving reference flame realism */
.cake-stage .subhead{margin-bottom:42px !important;position:relative;z-index:10;}
.cake-scene{margin-top:10px !important;}
.candles-row{z-index:12 !important;}
.cake-blown .flame-outer,.cake-blown .flame-inner,.cake-blown .flame-core{opacity:0 !important;transform:scale(0) !important;}
.no-running{position:fixed !important;z-index:999999 !important;transition:left 260ms var(--ease-spring),top 260ms var(--ease-spring),transform 260ms var(--ease-spring) !important;}
@media (max-width:600px){.gift-grid{grid-template-columns:repeat(2,minmax(130px,1fr)) !important;}.gift-icon{width:110px !important;height:110px !important;}.gift-icon svg{width:78px !important;height:78px !important;}.back-btn{top:58px !important;}.cake-stage .subhead{margin-bottom:58px !important;}.cake-scene{transform:scale(.88);}}

/* ---- From inline style attributes in the original file ---------------------
   Each rule carries exactly what one style="" attribute said. The repeated
   class keeps the priority an inline style had over ordinary rules. */
.x1.x1.x1 { top:-10px;left:-18px;--size:22px;--dur:3.2s;--delay:0s;--rot:-10deg;--rot2:15deg; }
.x2.x2.x2 { top:-14px;right:-14px;--size:18px;--dur:2.8s;--delay:0.6s;--rot:12deg;--rot2:-8deg; }
.x3.x3.x3 { bottom:20px;left:-24px;--size:16px;--dur:3.5s;--delay:1.2s;--rot:-5deg;--rot2:10deg; }
.x4.x4.x4 { bottom:14px;right:-20px;--size:20px;--dur:2.6s;--delay:0.3s;--rot:8deg;--rot2:-12deg; }
.x5.x5.x5 { animation:screenEnter 800ms 200ms both; }
.x6.x6.x6 { margin-top:12px;max-width:500px;animation:screenEnter 800ms 400ms both; }
.x7.x7.x7 { animation:screenEnter 700ms 600ms both; }
.x8.x8.x8 { padding:16px; }
.x9.x9.x9 { margin-top:24px; }
.x10.x10.x10 { max-width:460px; }
.x11.x11.x11 { position:absolute;top:0;left:50%;transform:translateX(-50%);width:240px;height:60px;pointer-events:none; }
.x12.x12.x12 { max-width:520px;margin:10px auto 0; }
.x13.x13.x13 { --i:0; }
.x14.x14.x14 { --i:1; }
.x15.x15.x15 { --i:2; }
.x16.x16.x16 { --i:3; }
.x17.x17.x17 { margin-top:14px; }
.x18.x18.x18 { margin-top:22px; }
.x19.x19.x19 { max-width:500px;margin:8px auto 0; }
.x20.x20.x20 { max-width:460px;margin:8px auto 0; }
.x21.x21.x21 { margin-top:10px; }
.x22.x22.x22 { max-width:440px;margin:8px auto 0; }
.x23.x23.x23 { width:100%; }
.x24.x24.x24 { margin-top:12px; }

/* ---- Added for the public sample ------------------------------------------- */
.sample-bar { position:fixed; top:14px; right:14px; z-index:60; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 96px); padding:9px 16px; border-radius:999px; background:rgba(255,255,255,0.82); border:1px solid rgba(232,84,122,0.22); box-shadow:0 10px 30px rgba(200,80,120,0.14); font-size:13px; color:var(--ink-soft); }
.sample-bar strong { color:var(--ink); font-weight:500; }
.sample-bar__short { display:none; }
[tabindex="-1"]:focus { outline:none; }
.sample-bar a { color:var(--rose-deep); font-weight:500; text-decoration:none; white-space:nowrap; }
.sample-bar a:hover, .sample-bar a:focus-visible { text-decoration:underline; }
.pw-hint { margin:-4px 0 14px; font-size:13px; color:var(--ink-soft); }
.needs-js { position:relative; z-index:70; max-width:30em; margin:70px auto 0; padding:14px 18px; border:1px solid rgba(232,84,122,0.3); border-radius:16px; background:#FFF8FB; color:var(--ink); text-align:center; font-size:14px; }
.needs-js a { color:var(--rose-deep); }
.pw-hint strong { letter-spacing:0.08em; color:var(--rose-deep); font-weight:500; }
[role="button"]:focus-visible, .btn:focus-visible, .nav-btn:focus-visible, .home-btn:focus-visible, .back-btn:focus-visible, .sample-bar a:focus-visible { outline:2px solid var(--rose-deep); outline-offset:3px; }
.cat-frame img { height:auto; background:var(--rose-blush); }
/* On a phone the bar sits along the top: the page keeps its own round button at the bottom. */
@media (max-width:700px) { .sample-bar { top:8px; right:10px; left:10px; max-width:none; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding:8px 14px; border-radius:18px; font-size:12px; } .sample-bar__more { display:none; } .sample-bar__short { display:inline; } .app { padding-top:64px !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }