/* ============ dimensional scene objects (faux-3D, pure CSS) ============ */
.scene {
  position: relative; width: 100%; height: 262px; flex: none;
  display: grid; place-items: center;
  perspective: 1000px; perspective-origin: 50% 46%;
}
.scene .haze {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,190,141,.16), transparent 62%);
  filter: blur(22px); animation: hazePulse 7s var(--ease-in-out) infinite;
}
@keyframes hazePulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.1); } }
.scene .groundshadow {
  position: absolute; bottom: 40px; width: 190px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.72), transparent 70%);
  filter: blur(9px); animation: shadowBreath 6s var(--ease-in-out) infinite;
}
@keyframes shadowBreath { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(.86); opacity: .58; } }

/* ---- 1. folded paper message (brand object) ---- */
/* The flap sits on the same crease as the sheet and tilts slightly further
   back, so it reads as one folded object rather than two stacked cards. */
.paper-wrap { transform-style: preserve-3d; animation: floatDrift 9s var(--ease-in-out) infinite; }
@keyframes floatDrift {
  0%,100% { transform: rotateX(34deg) rotateZ(-11deg) translateY(0); }
  50%     { transform: rotateX(28deg) rotateZ(-6deg) translateY(-12px); }
}
.paper {
  position: relative; width: 172px; height: 134px; transform-style: preserve-3d;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.55));
}
.paper .leaf {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(158deg, #EFE8DA 0%, #DED3C0 44%, #C6B9A2 74%, #AFA189 100%);
  box-shadow: inset 0 0 34px rgba(140,120,90,.2), inset 0 1px 0 rgba(255,255,255,.8);
}
.paper .leaf::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='90' height='90' filter='url(%23f)' opacity='.55'/></svg>");
}
.paper .flap {
  position: absolute; left: 0; right: 0; top: 0; height: 46%;
  transform-origin: bottom center; transform: rotateX(15deg);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(178deg, #FFFAEF 0%, #F0E7D6 58%, #DDD0B9 100%);
  box-shadow: 0 8px 14px rgba(60,48,32,.3), inset 0 1px 0 rgba(255,255,255,.95);
}
.paper .crease {
  position: absolute; left: 0; right: 0; top: 46%; height: 3px;
  background: linear-gradient(180deg, rgba(96,80,56,.4), transparent);
}
/* pause symbol pressed into the lower panel */
.paper .pause {
  position: absolute; left: 50%; top: 73%; transform: translate(-50%,-50%);
  display: flex; gap: 6px;
}
.paper .pause i {
  width: 6px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, #AC9B80, #8D7B5B);
  box-shadow: inset 0 1px 1px rgba(60,48,30,.5), 0 1px 0 rgba(255,255,255,.6);
}
.paper .rim {
  position: absolute; inset: -4px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(140deg, rgba(239,220,178,.55), transparent 44%, transparent 58%, rgba(176,117,122,.4));
  filter: blur(7px); opacity: .8; animation: rimBreath 6s var(--ease-in-out) infinite;
}
@keyframes rimBreath { 0%,100% { opacity: .5; } 50% { opacity: .95; } }

/* ---- 2. heated message card cooling down ---- */
.heat-stack { position: relative; width: 250px; height: 190px; transform-style: preserve-3d; animation: cardHover 8s var(--ease-in-out) infinite; }
@keyframes cardHover {
  0%,100% { transform: rotateX(16deg) rotateY(-11deg) translateZ(0); }
  50%     { transform: rotateX(11deg) rotateY(-5deg) translateZ(22px); }
}
.msgcard {
  position: absolute; inset: 0; border-radius: 20px; padding: 20px;
  background: linear-gradient(158deg, rgba(58,44,44,.9), rgba(26,22,24,.86));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(176,117,122,.34), 0 30px 50px rgba(0,0,0,.6);
  font-size: 14.5px; line-height: 1.55; color: #EBD9D6;
  animation: coolDown 9s var(--ease-in-out) infinite;
}
@keyframes coolDown {
  0%, 34% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(176,117,122,.55), 0 0 34px rgba(176,117,122,.34), 0 30px 50px rgba(0,0,0,.6);
    background: linear-gradient(158deg, rgba(72,48,48,.92), rgba(32,24,26,.88));
  }
  72%, 100% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(126,148,131,.42), 0 0 26px rgba(126,148,131,.2), 0 30px 50px rgba(0,0,0,.6);
    background: linear-gradient(158deg, rgba(38,46,42,.9), rgba(22,26,25,.88));
  }
}
.msgcard .hot { color: #F0C3BE; transition: color 1s; animation: hotWord 9s var(--ease-in-out) infinite; }
@keyframes hotWord { 0%,30% { color: #F5B7B0; text-shadow: 0 0 14px rgba(197,122,114,.7); } 70%,100% { color: #9BA79C; text-shadow: none; } }
.orbit { position: absolute; inset: -30px; animation: spinSlow 22s linear infinite; pointer-events: none; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--rosewood); box-shadow: 0 0 12px var(--rosewood-glow); opacity: .7; }
.orbit i:nth-child(1) { top: 4%; left: 12%; }
.orbit i:nth-child(2) { top: 46%; right: 2%; background: var(--champagne); box-shadow: 0 0 12px var(--champagne-glow); }
.orbit i:nth-child(3) { bottom: 8%; left: 34%; background: var(--sage); box-shadow: 0 0 12px var(--sage-glow); }

/* ---- 3. writing board in perspective + mic ---- */
.board-scene { transform: rotateX(30deg) rotateZ(-6deg); transform-style: preserve-3d; animation: boardFloat 8s var(--ease-in-out) infinite; }
@keyframes boardFloat { 0%,100% { transform: rotateX(30deg) rotateZ(-6deg) translateZ(0); } 50% { transform: rotateX(25deg) rotateZ(-3deg) translateZ(20px); } }
.board-mini {
  width: 236px; height: 148px; border-radius: 16px; padding: 18px;
  background: linear-gradient(165deg, #1E2126, #101317);
  box-shadow: inset 0 0 0 1px rgba(216,190,141,.26), inset 0 1px 0 rgba(255,255,255,.08), 0 30px 44px rgba(0,0,0,.62);
}
.board-mini .ln { height: 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(243,238,229,.20), rgba(243,238,229,.05)); margin-bottom: 11px; }
.board-mini .ln:nth-child(2) { width: 82%; } .board-mini .ln:nth-child(3) { width: 58%; }
.board-mini .caret { display: inline-block; width: 2px; height: 17px; background: var(--champagne-bright); box-shadow: 0 0 10px var(--champagne-glow); animation: blink 1.15s steps(2) infinite; vertical-align: middle; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.mic-3d {
  position: absolute; right: 34px; bottom: 44px; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 22%, #444A53 0%, #1A1D22 46%, #0A0C0F 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.26), inset 0 -4px 10px rgba(0,0,0,.85), 0 0 0 1.5px rgba(216,190,141,.5), 0 16px 28px rgba(0,0,0,.65);
  display: grid; place-items: center; color: var(--champagne-bright);
  animation: micBreath 3.4s var(--ease-in-out) infinite;
}

/* ---- 4. frosted selection chips in depth ---- */
.chip-scene { transform-style: preserve-3d; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.chip3d {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill);
  background: linear-gradient(160deg, rgba(58,64,74,.6), rgba(22,25,30,.68));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(216,190,141,.34), 0 18px 32px rgba(0,0,0,.5);
  font-size: 15px; color: var(--ivory);
  animation: chipIn 1s var(--ease-lift) both;
}
.chip3d:nth-child(1) { transform: translateZ(40px) rotateY(-9deg); animation-delay: .1s; }
.chip3d:nth-child(2) { transform: translateZ(0) rotateY(-4deg); animation-delay: .3s; }
.chip3d:nth-child(3) { transform: translateZ(-40px) rotateY(0deg); animation-delay: .5s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(28px) translateZ(-90px); } }
.chip3d .k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-deep); }

/* ---- 5. reflection: heat card -> insight card ---- */
.reflect-scene { display: flex; flex-direction: column; align-items: center; gap: 8px; transform: rotateX(14deg); transform-style: preserve-3d; }
.mini-card {
  width: 232px; padding: 15px 17px; border-radius: 16px; font-size: 13.5px; line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 34px rgba(0,0,0,.55);
}
.mini-card.hotcard { background: linear-gradient(158deg, rgba(66,44,46,.92), rgba(30,22,24,.9)); color: #E9CFCC; box-shadow: inset 0 0 0 1px rgba(176,117,122,.42), 0 20px 34px rgba(0,0,0,.55); transform: translateZ(30px); }
.mini-card.hotcard b { color: #F5B7B0; font-weight: 500; animation: hotWord 7s var(--ease-in-out) infinite; }
.mini-card.calmcard { background: linear-gradient(158deg, rgba(36,44,40,.92), rgba(20,24,22,.9)); color: #D6DED7; box-shadow: inset 0 0 0 1px rgba(126,148,131,.4), 0 0 24px rgba(126,148,131,.14), 0 20px 34px rgba(0,0,0,.55); animation: calmArrive 7s var(--ease-in-out) infinite; }
@keyframes calmArrive { 0%,38% { opacity: .25; transform: translateY(10px); } 62%,100% { opacity: 1; transform: none; } }
.connector { width: 2px; height: 26px; background: linear-gradient(180deg, var(--champagne-bright), transparent); box-shadow: 0 0 12px var(--champagne-glow); animation: flow 7s var(--ease-in-out) infinite; }
@keyframes flow { 0%,30% { opacity: 0; transform: scaleY(0); transform-origin: top; } 55%,100% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

/* ---- 6. rewrite fold ---- */
.fold-scene { transform-style: preserve-3d; animation: foldFloat 9s var(--ease-in-out) infinite; }
@keyframes foldFloat { 0%,100% { transform: rotateX(18deg) rotateY(-8deg); } 50% { transform: rotateX(13deg) rotateY(-2deg) translateZ(18px); } }
.fold-card {
  width: 236px; padding: 18px; border-radius: 18px; font-size: 14px; line-height: 1.55; color: var(--ivory);
  background: linear-gradient(158deg, rgba(46,50,58,.86), rgba(20,23,27,.86));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(216,190,141,.28), 0 30px 48px rgba(0,0,0,.62);
  animation: refold 8s var(--ease-in-out) infinite;
}
/* A visible crease, not a disappearing card - it stays readable throughout. */
@keyframes refold {
  0%,20%  { transform: rotateX(0deg) scaleY(1); opacity: 1; }
  34%     { transform: rotateX(34deg) scaleY(.92); opacity: .86; }
  50%,100%{ transform: rotateX(0deg) scaleY(1); opacity: 1; }
}
.fold-chips { display: flex; gap: 7px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.fold-chips span {
  padding: 8px 14px; border-radius: var(--radius-pill); font-size: 12px; color: var(--ivory-dim);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(216,190,141,.22);
  animation: chipIn .8s var(--ease-lift) both;
}
.fold-chips span:nth-child(2) { animation-delay: .12s; }
.fold-chips span:nth-child(3) { animation-delay: .24s; }
.fold-chips span:nth-child(4) { animation-delay: .36s; }

/* ---- 7. vault ---- */
.vault-scene { transform: rotateX(24deg); transform-style: preserve-3d; position: relative; }
.vault-body {
  position: relative; z-index: 2;
  width: 234px; height: 128px; border-radius: 16px;
  background: linear-gradient(168deg, #262A30 0%, #14171B 60%, #0C0E11 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(216,190,141,.3), 0 30px 46px rgba(0,0,0,.66);
  position: relative; overflow: hidden;
}
.vault-body::after {
  content: ''; position: absolute; inset: 14px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(216,190,141,.18);
  background: linear-gradient(180deg, rgba(126,148,131,.12), transparent);
  animation: sageGlow 6s var(--ease-in-out) infinite;
}
@keyframes sageGlow { 0%,45% { opacity: 0; } 70%,100% { opacity: 1; box-shadow: inset 0 0 0 1px rgba(126,148,131,.4), inset 0 0 30px rgba(126,148,131,.24); } }
.vault-note {
  position: absolute; z-index: 1; left: 50%; top: -46px; width: 96px; height: 66px; border-radius: 6px;
  transform: translateX(-50%);
  background: linear-gradient(158deg, #F4EFE4, #D6C9B2);
  box-shadow: 0 14px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
  animation: sealSlide 6s var(--ease-in-out) infinite;
}
@keyframes sealSlide {
  0%,12%  { transform: translateX(-50%) translateY(0) rotateX(0) scale(1); opacity: 1; }
  46%     { transform: translateX(-50%) translateY(52px) rotateX(50deg) scale(.9); opacity: 1; }
  66%,100%{ transform: translateX(-50%) translateY(76px) rotateX(74deg) scale(.8); opacity: 0; }
}
.vault-handle { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 54px; height: 6px; border-radius: 4px; background: linear-gradient(180deg, var(--champagne-bright), var(--champagne-deep)); box-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 14px var(--champagne-glow); }

/* ---- 8. plan cards ---- */
.plan {
  position: relative; width: 100%; padding: 18px; border-radius: var(--radius-lg); text-align: left;
  background: linear-gradient(168deg, var(--graphite-raised), var(--graphite));
  box-shadow: var(--edge-top), inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-mid);
  transition: transform .2s var(--ease-lift), box-shadow .28s;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.plan:active { transform: scale(.985); }
.plan.selected { box-shadow: inset 0 0 0 1.5px var(--champagne), 0 0 0 4px rgba(216,190,141,.08), 0 20px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.plan .pname { display: block; font-size: 16px; font-weight: 600; }
.plan .pprice { font-size: 15px; color: var(--champagne-bright); font-weight: 600; }
.plan .pnote { display: block; font-size: 12.5px; color: var(--ivory-faint); margin-top: 4px; line-height: 1.4; }
.plan .best {
  position: absolute; top: -11px; right: 16px;
  background: linear-gradient(180deg, #2A2E36, #1F232A);
  color: var(--champagne-bright);
  box-shadow: inset 0 0 0 1px rgba(216,190,141,.42), 0 4px 10px rgba(0,0,0,.5);
}
.radio { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); display: grid; place-items: center; }
.plan.selected .radio { box-shadow: inset 0 0 0 1.5px var(--champagne); }
.plan.selected .radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(180deg, var(--champagne-bright), var(--champagne-deep)); box-shadow: 0 0 10px var(--champagne-glow); }

/* ---- onboarding shell ---- */
.dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.16); transition: all .35s var(--ease-lift); }
.dots i.on { width: 20px; border-radius: 3px; background: linear-gradient(90deg, var(--champagne-bright), var(--champagne-deep)); box-shadow: 0 0 10px var(--champagne-glow); }
.ob-copy { text-align: center; padding: 0 6px; }
.ob-copy h1 { margin-bottom: 12px; }
.ob-copy .sub { font-size: 16px; color: var(--ivory-dim); line-height: 1.5; }
.brandmark { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne-deep); margin-bottom: 14px; }

/* ---- loading ---- */
.loader-scene { display: grid; place-items: center; height: 240px; position: relative; }
.pulse-ring { position: absolute; width: 110px; height: 110px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(216,190,141,.35); animation: ringOut 3.2s var(--ease-in-out) infinite; }
.pulse-ring:nth-child(2) { animation-delay: 1.05s; }
.pulse-ring:nth-child(3) { animation-delay: 2.1s; }
@keyframes ringOut { 0% { transform: scale(.5); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.loader-core {
  width: 84px; height: 84px; border-radius: 24px; transform: rotateX(38deg) rotateZ(-14deg);
  background: linear-gradient(158deg, #F6F1E6, #C9BCA4);
  box-shadow: 0 20px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9);
  animation: coreBreath 3.4s var(--ease-in-out) infinite;
}
@keyframes coreBreath { 0%,100% { transform: rotateX(38deg) rotateZ(-14deg) scale(1); } 50% { transform: rotateX(30deg) rotateZ(-8deg) scale(1.07); } }
.loader-copy { text-align: center; font-size: 16px; color: var(--ivory-dim); min-height: 26px; transition: opacity .5s; }