/* Positions measured against the supplied 1206 x 2532 reference canvas. */
.namaste-screen {
  container-type: size; position: relative; flex: 1 1 auto; width: 100%; height: 100%;
  min-height: 0; overflow: hidden; isolation: isolate; color: #fff; perspective: 1600px;
}
.namaste-copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.namaste-quote {
  position: absolute; top: 13.7%; left: 10.5%; height: 4.6cqh;
  font: 600 min(16cqw, 7.6cqh)/.95 var(--sans);
}
.namaste-copy h1 {
  position: absolute; top: 18.55%; left: 10.5%; right: 7%; margin: 0;
  font: 400 min(6.4cqw, 3.05cqh)/1.15 var(--serif); letter-spacing: -.025em; outline: none;
}
.namaste-copy p {
  position: absolute; top: 23.25%; left: 10.5%; right: 7%; margin: 0;
  font: 600 min(3.85cqw, 1.84cqh)/1.19 var(--sans); letter-spacing: -.025em;
}
.namaste-reveal {
  position: absolute; z-index: 3; top: 34.1%; left: 10.5%; width: 79%; height: 6.5%; min-height: 40px;
  padding: 0 2cqw; border-radius: 999px; background: #fff; color: #000;
  font: 600 min(4.35cqw, 2.08cqh)/1.3 var(--sans); white-space: nowrap;
  box-shadow: 0 7px 10px #68071438;
}
.namaste-reveal[hidden] { display: none; }
.namaste-reveal:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.namaste-reveal:active { transform: scale(.98); }
.namaste-envelope {
  position: absolute; z-index: 1; top: 47.35%; left: 0; width: 100%; height: 64.93cqh;
  transform: translateY(55cqh); pointer-events: none; perspective: 1600px;
  transform-origin: 50% 75%;
}
.namaste-envelope > svg, .namaste-card > .namaste-card-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.namaste-pocket-back { z-index: 0; }
.namaste-card { position: absolute; inset: 0; z-index: 2; transform: translateY(43.44cqh); transform-origin: 50% 68%; }
.namaste-card-art { filter: drop-shadow(0 5px 7px #463b2930); }
.namaste-pocket-front { z-index: 3; filter: drop-shadow(0 -1px 2px #6b625424); }
.namaste-flap {
  z-index: 4; transform-origin: 50% 38.56%; transform: rotateX(-180deg);
  backface-visibility: visible; filter: drop-shadow(0 -3px 4px #51483928);
}
.namaste-card-message {
  position: absolute; top: 10.55cqh; left: 15.5%; width: 73%; margin: 0;
  color: #000; font: 400 min(5.1cqw, 2.44cqh)/1.12 var(--serif);
}
.namaste-card-message span { display: block; }
.namaste-brand {
  position: absolute; z-index: 5; top: 44.05cqh; left: 8%; right: 8%; text-align: center;
}
.namaste-brand svg { display: block; width: min(29cqw, 13.8cqh); margin: 0 auto; }
.namaste-brand p { margin: .7cqh 0 0; color: #151515; font: 600 min(2.45cqw, 1.17cqh)/1.3 var(--sans); letter-spacing: -.035em; }
.is-playing .namaste-envelope { animation: namasteEnvelopeArrive 2700ms 100ms linear both; }
.is-playing .namaste-quote { animation: namasteGreeting 700ms 50ms cubic-bezier(.22,1,.36,1) both; }
.is-playing .namaste-copy h1 { animation: namasteGreeting 850ms 160ms cubic-bezier(.22,1,.36,1) both; }
.is-playing .namaste-copy p { animation: namasteGreeting 850ms 300ms cubic-bezier(.22,1,.36,1) both; }
.is-playing .namaste-flap { animation: namasteFlapOpen 650ms 750ms cubic-bezier(.45,0,.18,1) both; }
.is-playing .namaste-card { animation: namasteCardLift 1400ms 1400ms cubic-bezier(.2,.65,.18,1) both; }
.is-ready .namaste-envelope, .is-ready .namaste-card, .is-ready .namaste-flap { animation: none; transform: none; }
.is-ready .namaste-flap { z-index: 1; }
.is-ready .namaste-reveal { animation: namasteButtonReveal 400ms cubic-bezier(.22,1,.36,1) both; }
@keyframes namasteEnvelopeArrive {
  0% { transform: translate3d(0,55cqh,0); animation-timing-function: cubic-bezier(.18,.65,.3,1); }
  26% { transform: translate3d(0,20cqh,0); animation-timing-function: cubic-bezier(.4,0,.35,1); }
  48% { transform: translate3d(0,16cqh,0); animation-timing-function: cubic-bezier(.22,.6,.24,1); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes namasteFlapOpen {
  0% { transform: rotateX(-180deg); z-index: 4; filter: drop-shadow(0 -3px 4px #51483928) brightness(.98); }
  35% { filter: drop-shadow(0 12px 14px #51483938) brightness(1.035); }
  49% { z-index: 4; }
  50% { z-index: 1; }
  75% { filter: drop-shadow(0 6px 8px #51483918) brightness(1.01); }
  100% { transform: rotateX(0deg); z-index: 1; filter: drop-shadow(0 1px 2px #51483910) brightness(1); }
}
@keyframes namasteCardLift {
  0% { transform: translate3d(0,43.44cqh,0) rotateZ(-.75deg); }
  58% { transform: translate3d(0,9cqh,0) rotateZ(.35deg); }
  86% { transform: translate3d(0,.8cqh,0) rotateZ(.08deg); }
  100% { transform: translate3d(0,0,0) rotateZ(0deg); }
}
@keyframes namasteGreeting { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes namasteButtonReveal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .namaste-screen * { animation: none !important; }
}
