/* Demo mode (/d) — 3D attract loop. Pure CSS 3D; JS (js/demo.js) only switches scenes,
   builds the tunnel/carousel/capsule, feeds the tilt (--rx/--ry) and bursts petals on tap.
   Scenes: 1 floating paper + laser · 2 exploded medicine carousel + extruded capsule
           3 language flip card · 4 dive into the bloom.  Total loop ≈ 18 s. */

.attract {
  --rx: 0deg; --ry: 0deg;
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; color: var(--cream); text-align: center;
  display: grid; grid-template-rows: 1fr auto auto; justify-items: center;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 42%, #2A3A26 0, var(--deep) 38%, var(--night) 75%);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}

/* ---------- background illusions ---------- */
.att-bg { position: absolute; inset: 0; pointer-events: none; perspective: 600px; perspective-origin: 50% 42%; overflow: hidden; }
/* Moiré: two sets of fine rings turning against each other — the eye sees waves that aren't drawn. */
.moire, .moire::after {
  position: absolute; left: 50%; top: 42%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(246,210,122,.07) 0 2px, transparent 2px 11px);
  animation: spin 90s linear infinite;
}
.moire::after { content: ""; left: 0; top: 0; margin: 0; transform-origin: 48% 52%; background: repeating-radial-gradient(circle at 51.5% 49%, rgba(181,208,143,.06) 0 2px, transparent 2px 11px); animation: spin 70s linear infinite reverse; }
/* Infinite tunnel: rings of petals fly out of the centre towards you, forever. */
.tunnel { position: absolute; left: 50%; top: 42%; transform-style: preserve-3d; transform: rotateX(calc(var(--ry) * .6)) rotateY(calc(var(--rx) * .6)); }
.tunnel .ring-t { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: tunnel 9s linear infinite; animation-delay: calc(var(--k) * -1s); opacity: 0; }
.tunnel .petal-t { position: absolute; width: 26px; height: 54px; margin: -27px 0 0 -13px; border-radius: 50%; transform: rotate(var(--a)) translateY(-120px); opacity: .55; }
.tunnel .petal-t:nth-child(odd) { background: linear-gradient(135deg, #F6D27A, #C8902E); }
.tunnel .petal-t:nth-child(even) { background: linear-gradient(135deg, #B5D08F, #3F5F3A); }
@keyframes tunnel {
  0% { transform: translateZ(-1400px) rotate(0deg); opacity: 0; }
  15% { opacity: .9; }
  85% { opacity: .5; }
  100% { transform: translateZ(520px) rotate(120deg); opacity: 0; }
}

/* ---------- 3D world (tilts with the phone) ---------- */
.att-world {
  position: relative; width: 100%; max-width: 440px; height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  perspective: 900px;
}
.att-brand { display: flex; align-items: center; gap: 10px; z-index: 2; }
.att-brand .bloom { width: 46px; height: 46px; animation: spin 16s linear infinite; filter: drop-shadow(0 0 16px rgba(246,210,122,.5)); }
.att-brand .word { font-size: 30px; }
.att-stage {
  position: relative; width: 100%; height: min(58vh, 460px); transform-style: preserve-3d;
  transform: rotateX(calc(10deg + var(--ry))) rotateY(var(--rx)); transition: transform .25s ease-out;
}
.att-scene { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; pointer-events: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); transform: translateZ(-260px) scale(.9); }
.attract[data-scene="1"] .s1, .attract[data-scene="2"] .s2, .attract[data-scene="3"] .s3, .attract[data-scene="4"] .s4 { opacity: 1; transform: none; }

/* Scene 1 — a perspective grid floor and a prescription floating above it, scanned by a laser plane. */
.floor {
  position: absolute; left: 50%; bottom: 2%; width: 900px; height: 900px; margin-left: -450px; transform-origin: 50% 100%;
  transform: rotateX(82deg); background:
    linear-gradient(rgba(246,210,122,.35) 2px, transparent 2px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(246,210,122,.35) 2px, transparent 2px) 0 0 / 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 15%, transparent 60%); mask-image: radial-gradient(circle at 50% 100%, #000 15%, transparent 60%);
  animation: floorRun 2s linear infinite;
}
@keyframes floorRun { to { background-position: 0 60px, 0 0; } }
.doc3d { position: absolute; left: 50%; top: 46%; width: 300px; height: 330px; margin: -165px 0 0 -150px; transform-style: preserve-3d; animation: float 6s ease-in-out infinite; }
.doc3d-paper { position: absolute; inset: 0; overflow: hidden; transform: rotateX(18deg) rotateZ(-5deg) translateZ(40px); box-shadow: 0 0 0 3px var(--gold-l), 14px 14px 0 var(--gold); background: #fffdf6; text-align: left; }
.doc3d-paper .paper { transform: scale(.82); transform-origin: top left; width: 366px; border: 0; box-shadow: none; }
.doc3d-shadow { position: absolute; left: 10%; right: 10%; bottom: -70px; height: 40px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.55), transparent 70%); transform: rotateX(80deg); animation: shadow 6s ease-in-out infinite; }
.laser { position: absolute; left: -30px; right: -30px; top: 0; height: 4px; transform: rotateX(18deg) rotateZ(-5deg) translateZ(70px); background: linear-gradient(90deg, transparent, #F6D27A 20%, #fff 50%, #F6D27A 80%, transparent); box-shadow: 0 0 22px 6px rgba(246,210,122,.8), 0 0 60px 20px rgba(246,210,122,.25); animation: laser 2.2s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes laser { from { top: 4%; } to { top: 92%; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotateY(-8deg); } 50% { transform: translateY(-16px) rotateY(8deg); } }
@keyframes shadow { 0%, 100% { opacity: .9; transform: rotateX(80deg) scale(1); } 50% { opacity: .5; transform: rotateX(80deg) scale(.85); } }

/* Scene 2 — exploded view: medicine cards orbit in a 3D ring; an extruded capsule spins in front. */
.carousel { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; }
.ring { position: absolute; transform-style: preserve-3d; animation: orbit 9s linear infinite; }
@keyframes orbit { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
.orb-card {
  position: absolute; width: 196px; margin: -70px 0 0 -98px; padding: 12px 14px 14px; text-align: left; color: var(--ink);
  background: var(--cream); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--gold);
  transform: rotateY(var(--a)) translateZ(170px); backface-visibility: hidden;
}
.orb-card b { display: block; font: 400 18px var(--font-head); }
.orb-card small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.orb-card .tt { margin-top: 0; gap: 5px; }
.orb-card .tt-slot { padding: 5px 2px; font-size: 10px; }
.orb-card .tt-slot svg { width: 18px; height: 18px; }
.attract[data-scene="2"] .orb-card { animation: explode 1.1s cubic-bezier(.2,.9,.25,1.2) both; animation-delay: calc(var(--i) * .15s); }
@keyframes explode { from { transform: rotateY(var(--a)) translateZ(0) scale(.3); opacity: 0; } }
.orb-card { width: 150px; margin-left: -75px; padding: 10px 10px 12px; }
.orb-card b { font-size: 16px; }
.capsule3d { position: absolute; left: 50%; top: 78%; width: 0; height: 0; transform-style: preserve-3d; animation: tumble 5s linear infinite; }
.capsule3d i { position: absolute; width: 96px; height: 38px; margin: -19px 0 0 -48px; border-radius: 19px; transform: translateZ(var(--z));
  background: linear-gradient(90deg, #C8902E 0 50%, #3F5F3A 50% 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.capsule3d i:first-child, .capsule3d i:last-child { background: linear-gradient(90deg, #F6D27A 0 50%, #B5D08F 50% 100%); }
@keyframes tumble { from { transform: rotateX(20deg) rotateY(0deg) rotateZ(-25deg); } to { transform: rotateX(20deg) rotateY(360deg) rotateZ(-25deg); } }

/* Scene 3 — a thick 3D card flipping between English and Hindi. */
.flip { position: absolute; left: 50%; top: 46%; width: 300px; height: 190px; margin: -95px 0 0 -150px; perspective: 1000px; }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.attract[data-scene="3"] .flip-inner { animation: flip 4.4s cubic-bezier(.6,0,.3,1) both; }
@keyframes flip { 0%, 22% { transform: rotateY(0deg) rotateX(8deg); } 55%, 100% { transform: rotateY(180deg) rotateX(-8deg); } }
.face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--gold); }
.face small { font: 700 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.face b { font: 400 30px var(--font-head); }
.face span { font-weight: 700; font-size: 18px; }
.face.back { transform: rotateY(180deg); background: linear-gradient(160deg, #FFF6DA, var(--cream)); }
.face.back small { letter-spacing: 0; }
.face.back span, .face.back small { font-family: "Noto Sans Devanagari", var(--font); }

/* Scene 4 — the bloom rushes towards you (dolly zoom), petals breathing. */
.dive { position: absolute; left: 50%; top: 45%; width: 220px; height: 220px; margin: -110px 0 0 -110px; transform-style: preserve-3d; }
.dive .bloom { width: 100%; height: 100%; filter: drop-shadow(0 0 40px rgba(246,210,122,.6)); }
.attract[data-scene="4"] .dive { animation: dive 4.4s cubic-bezier(.5,0,.2,1) both; }
@keyframes dive { 0% { transform: translateZ(-900px) rotate(-90deg); } 60% { transform: translateZ(0) rotate(0); } 80% { transform: translateZ(60px) rotate(20deg) scale(1.05); } 100% { transform: translateZ(0) rotate(45deg); } }

/* ---------- captions, CTA, hint ---------- */
.att-caption { position: relative; height: 66px; width: 100%; z-index: 2; }
.cap { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px/1.1 var(--font-head); text-transform: uppercase; opacity: 0; transform: translateY(16px) rotateX(-60deg); transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.3,1.3); text-shadow: 0 4px 24px rgba(0,0,0,.6); }
:lang(hi) .cap { font-family: var(--font); font-weight: 900; text-transform: none; }
.attract[data-scene="1"] .c1, .attract[data-scene="2"] .c2, .attract[data-scene="3"] .c3, .attract[data-scene="4"] .c4 { opacity: 1; transform: none; }
.attract-cta { position: relative; z-index: 2; margin-top: 10px; font: 400 22px var(--font-head); text-transform: uppercase; background: var(--g-gold); color: var(--night); padding: 16px 30px; border: 3px solid var(--night); box-shadow: 6px 6px 0 var(--cream); animation: ctaPulse 1.6s ease-in-out infinite; }
:lang(hi) .attract-cta { font-family: var(--font); font-weight: 900; }
@keyframes ctaPulse { 50% { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--cream); } }
.att-hint { position: relative; z-index: 2; margin-top: 12px; font-size: 13px; font-weight: 700; color: rgba(251,250,244,.6); opacity: 0; transition: opacity .6s; }
.attract.tilt-on .att-hint { opacity: 1; }
:lang(hi) .att-hint { letter-spacing: 0; }

/* ---------- tap: petals burst from the finger ---------- */
.att-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.att-burst i { position: absolute; width: 18px; height: 38px; margin: -19px 0 0 -9px; border-radius: 50%; animation: burst .55s cubic-bezier(.2,.8,.3,1) forwards; }
.att-burst i:nth-child(odd) { background: linear-gradient(135deg, #F6D27A, #C8902E); }
.att-burst i:nth-child(even) { background: linear-gradient(135deg, #B5D08F, #3F5F3A); }
@keyframes burst { from { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(-160px) scale(1.2); opacity: 0; } }
.attract.leaving { animation: leave .4s ease-in forwards; }
@keyframes leave { to { opacity: 0; transform: scale(1.15); filter: blur(4px); } }

@media (max-height: 640px) { .att-stage { height: 50vh; } .cap { font-size: 21px; } .att-caption { height: 54px; } }
@media (prefers-reduced-motion: reduce) {
  .tunnel, .moire, .floor, .laser { display: none; }
  .att-stage { transform: none; }
}
.c4 { align-content: center; gap: 2px; font-size: 22px; }
.c4 > span, .c4 em { display: block; }
.c4 em { font: italic 700 1.25em/1 var(--font-serif); text-transform: none; }
:lang(hi) .c4 em { font-family: var(--font); font-style: normal; }