/* ============================================================
   PURE OMEN · design system
   Palette: deep wine night, bone text, antique gold accent.
   Type: Fraunces (display) + Work Sans (body).
   ============================================================ */

:root {
  --page:#170D11;
  --page-2:#1D1016;
  --panel:#221219;
  --card:#2A1620;
  --card-2:#321B26;
  --bone:#F4EDDF;
  --bone-soft:#E6D8C3;
  --muted:#B39C8F;
  --gold:#C69A4C;
  --gold-lite:#DDC08A;
  --gold-deep:#A97C2E;
  --line:rgba(198,154,76,.2);
  --line-2:rgba(198,154,76,.45);
  --serif:"Fraunces","Big Caslon","Hoefler Text",Georgia,serif;
  --sans:"Work Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--page);
  color:var(--bone-soft);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection { background:var(--gold); color:var(--page); }

h1,h2,h3 { font-family:var(--serif); font-weight:500; color:var(--bone); line-height:1.12; }
a { color:var(--gold-lite); text-decoration:none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}
img, svg { display:block; }
section { scroll-margin-top:96px; position:relative; }

.wrap { max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px); }
.eyebrow {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.26em;
  color:var(--gold); font-weight:600; margin-bottom:16px;
}
.sec { padding:clamp(70px,9.5vw,120px) 0; }
.sec-head { max-width:62ch; margin-bottom:clamp(32px,5vw,52px); }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2 { font-size:clamp(1.8rem,3.8vw,2.7rem); margin-bottom:14px; text-wrap:balance; }
.sec-head p { color:var(--muted); font-size:1.06rem; }

/* --- night sky canvas + atmosphere --- */
#sky {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}
.veil {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1000px 640px at 50% -8%, rgba(198,154,76,.09), transparent 62%),
    radial-gradient(900px 700px at 88% 108%, rgba(78,31,46,.35), transparent 60%),
    radial-gradient(760px 560px at 6% 88%, rgba(78,31,46,.28), transparent 60%);
}
.page-root { position:relative; z-index:1; }

/* --- buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.85rem;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  border-radius:4px; cursor:pointer; border:1px solid transparent;
  padding:16px 30px; transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform:scale(.985); }
.btn-gold { background:var(--gold); color:#241105; box-shadow:0 6px 26px rgba(198,154,76,.16); }
.btn-gold:hover { background:var(--gold-lite); box-shadow:0 8px 32px rgba(198,154,76,.28); }
.btn-ghost { border-color:var(--line-2); color:var(--gold-lite); background:rgba(23,13,17,.4); }
.btn-ghost:hover { border-color:var(--gold); background:rgba(198,154,76,.08); }
.btn-sm { padding:11px 20px; font-size:.76rem; }

/* --- nav --- */
nav.top {
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(23,13,17,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in {
  max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px);
  height:76px; display:flex; align-items:center; gap:28px;
}
.brand { display:flex; align-items:center; gap:13px; color:var(--bone); font-family:var(--serif); letter-spacing:.2em; font-size:1.04rem; }
.brand svg { width:32px; color:var(--gold); }
.nav-links { display:flex; gap:30px; margin-left:auto; align-items:center; }
.nav-links a { color:var(--bone-soft); font-size:.93rem; position:relative; padding:4px 0; }
.nav-links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .22s ease;
}
.nav-links a:hover::after { right:0; }
.nav-links a:hover { color:var(--gold-lite); }
.nav-cta { display:flex; align-items:center; gap:14px; }
.nav-burger {
  display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  border-radius:4px; padding:9px 11px; cursor:pointer; color:var(--gold-lite);
}
.nav-burger svg { width:20px; height:14px; }

@media (max-width:900px) {
  .nav-links {
    display:none; position:absolute; top:76px; left:0; right:0;
    background:rgba(23,13,17,.97); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:10px 0 18px; margin:0;
  }
  .nav-links a { padding:13px clamp(20px,4vw,44px); width:100%; font-size:1rem; }
  body.menu-open .nav-links { display:flex; }
  .nav-burger { display:block; }
  .nav-cta { margin-left:0; }
  .nav-burger { order:3; margin-left:auto; }
  .nav-cta { order:4; }
}
@media (max-width:520px) {
  .nav-in { height:66px; gap:14px; }
  .brand { font-size:.92rem; letter-spacing:.15em; }
  .brand svg { width:27px; }
  .nav-cta .btn { padding:10px 15px; font-size:.72rem; letter-spacing:.05em; }
  .nav-links { top:66px; }
}
@media (max-width:352px) { .brand .bn { display:none; } }

/* --- hero --- */
header.hero {
  position:relative; text-align:center;
  padding:clamp(150px,19vw,215px) 0 clamp(80px,10vw,120px);
}
.hero .wrap { position:relative; z-index:2; }
.hero .mark {
  width:clamp(100px,15vw,148px); color:var(--gold); margin:0 auto 32px;
  filter:drop-shadow(0 0 26px rgba(198,154,76,.35));
}
.hero .kicker {
  font-family:var(--serif); letter-spacing:.34em; font-size:clamp(.86rem,1.8vw,1rem);
  color:var(--gold-lite); text-transform:uppercase; margin-bottom:20px;
}
.hero h1 { font-size:clamp(2.5rem,6.6vw,4.6rem); max-width:16ch; margin:0 auto 22px; text-wrap:balance; }
.hero .sub { color:var(--muted); max-width:56ch; margin:0 auto 40px; font-size:1.1rem; }
.hero .ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .trust {
  display:flex; gap:12px 30px; justify-content:center; flex-wrap:wrap;
  margin-top:50px; color:var(--muted); font-size:.86rem; letter-spacing:.04em;
}
.hero .trust span::before { content:"\2726"; color:var(--gold); margin-right:9px; font-size:.72em; }

/* the blink: a gold lid that closes over the eye briefly */
.mark .lid { transform-box:fill-box; transform-origin:50% 50%; transform:scaleY(0); animation:blink 7.5s ease-in-out infinite; }
@keyframes blink {
  0%, 91%, 100% { transform:scaleY(0); }
  93.5%, 95.5% { transform:scaleY(1); }
  98% { transform:scaleY(0); }
}

/* floating tarot cards in the hero: two faces, flip driven by scroll */
.float-card {
  position:absolute; width:clamp(96px,11vw,150px); pointer-events:none;
  opacity:.9; filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
  will-change:transform; perspective:900px;
}
.float-card svg { width:100%; height:auto; }
.fc-inner { position:relative; transform-style:preserve-3d; will-change:transform; }
.fc-face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fc-back { position:absolute; inset:0; transform:rotateY(180deg); }
.fc-1 { left:4%; top:24%; animation:floaty 7s ease-in-out infinite alternate; }
.fc-2 { right:5%; top:18%; animation:floaty 8.5s ease-in-out infinite alternate-reverse; }
.fc-3 { right:12%; bottom:6%; animation:floaty 6.5s ease-in-out .8s infinite alternate; }
@keyframes floaty {
  from { transform:translateY(-9px) rotate(-4deg); }
  to   { transform:translateY(10px) rotate(3.5deg); }
}
@media (max-width:940px) {
  .float-card { width:clamp(86px,11vw,120px); }
  .fc-1 { left:2%; top:21%; }
  .fc-2 { right:2%; top:15%; }
  .fc-3 { right:5%; bottom:10%; }
}
@media (max-width:620px) {
  .float-card { width:74px; opacity:.85; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
  .fc-1 { left:3.5%; top:11.5%; }
  .fc-2 { right:4%; top:9.5%; }
  .fc-3 { left:auto; right:7%; bottom:13%; }
}

.scroll-cue {
  margin:64px auto 0; width:22px; height:36px; border:1.6px solid var(--line-2);
  border-radius:12px; position:relative; opacity:.8;
}
.scroll-cue::after {
  content:""; position:absolute; left:50%; top:7px; width:3.5px; height:8px;
  transform:translateX(-50%); border-radius:3px; background:var(--gold);
  animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue { 0%{ transform:translate(-50%,0); opacity:1;} 70%{ transform:translate(-50%,12px); opacity:0;} 100%{opacity:0;} }

/* --- ornament divider --- */
.orn { display:flex; align-items:center; justify-content:center; gap:16px; color:var(--gold); opacity:.85; }
.orn::before, .orn::after { content:""; height:1px; width:min(140px,26vw); background:linear-gradient(90deg, transparent, var(--line-2)); }
.orn::after { background:linear-gradient(90deg, var(--line-2), transparent); }
.orn svg { width:20px; }

/* --- session section --- */
.session-grid { display:grid; grid-template-columns:minmax(300px,430px) 1fr; gap:clamp(26px,4.5vw,56px); align-items:center; }
@media (max-width:880px) { .session-grid { grid-template-columns:1fr; } }
.session-card-stage { display:flex; justify-content:center; }
.big-card { width:min(320px,78vw); }
.big-card svg { width:100%; height:auto; filter:drop-shadow(0 26px 48px rgba(0,0,0,.55)); }

/* the session card flips on click to answer doubt */
.session-card-stage { flex-direction:column; align-items:center; }
.big-card { cursor:pointer; }
.big-card:focus-visible { outline:2px solid var(--gold); outline-offset:6px; border-radius:18px; }
.fs-inner { position:relative; transform-style:preserve-3d; transition:transform .95s cubic-bezier(.2,.7,.25,1); }
.big-card.flipped .fs-inner { transform:rotateY(180deg); }
.fs-face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fs-back {
  position:absolute; inset:0; transform:rotateY(180deg);
  background:#321B26; border:2.5px solid var(--gold); border-radius:18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px 22px; gap:13px;
}
.fs-back::before { content:""; position:absolute; inset:9px; border:1px solid rgba(198,154,76,.5); border-radius:11px; pointer-events:none; }
.fsb-mark { width:42px; color:var(--gold); }
.fsb-kicker { font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.fs-back h3 { font-size:1.5rem; line-height:1.1; }
.fsb-body { color:var(--muted); font-size:.9rem; line-height:1.55; max-width:24ch; }
.fsb-note { color:var(--gold-lite); font-family:var(--serif); font-style:italic; font-size:.84rem; }
.flip-hint { margin-top:20px; color:var(--muted); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
html.static-mode .fs-inner { transition:none; }

.session-body h2 { font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:8px; }
.session-body .kind { color:var(--gold-lite); letter-spacing:.16em; text-transform:uppercase; font-size:.82rem; margin-bottom:22px; }
.session-body > p { margin-bottom:16px; }
.session-list { list-style:none; padding:0; margin:24px 0 30px; }
.session-list li { padding:11px 0 11px 30px; position:relative; border-bottom:1px dashed var(--line); }
.session-list li:last-child { border-bottom:0; }
.session-list li::before { content:"\2726"; color:var(--gold); position:absolute; left:2px; top:12px; font-size:.72em; }
.session-list b { color:var(--bone); font-weight:600; }

/* --- pillars --- */
.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.pillar { background:rgba(34,18,25,.75); border:1px solid var(--line); border-radius:12px; padding:32px 28px; backdrop-filter:blur(4px); }
.pillar .glyph { width:40px; color:var(--gold); margin-bottom:20px; }
.pillar h3 { font-size:1.3rem; margin-bottom:10px; }
.pillar p { color:var(--muted); font-size:.96rem; }

/* --- steps --- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; counter-reset:s; }
.step { background:rgba(34,18,25,.75); border:1px solid var(--line); border-radius:12px; padding:30px 28px; }
.step::before {
  counter-increment:s; content:counter(s,upper-roman);
  font-family:var(--serif); color:var(--gold); font-size:1.25rem;
  display:inline-flex; width:46px; height:46px; border:1px solid var(--line-2);
  border-radius:50%; align-items:center; justify-content:center; margin-bottom:20px;
}
.step h3 { font-size:1.22rem; margin-bottom:9px; }
.step p { color:var(--muted); font-size:.95rem; }
.step code {
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.85em;
  background:rgba(198,154,76,.12); color:var(--gold-lite); padding:2px 8px; border-radius:4px;
}
.copy-chip {
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  background:none; border:1px solid var(--line-2); color:var(--gold-lite);
  border-radius:999px; padding:6px 14px; font-size:.74rem; letter-spacing:.06em;
  cursor:pointer; font-family:var(--sans);
}
.copy-chip:hover { border-color:var(--gold); }

/* --- booking: two ways + payment card --- */
.paygrid { display:grid; grid-template-columns:1fr minmax(300px,360px); gap:22px; align-items:start; }
@media (max-width:920px) { .paygrid { grid-template-columns:1fr; max-width:560px; margin:0 auto; } }
.way { background:rgba(34,18,25,.75); border:1px solid var(--line); border-radius:12px; padding:28px 26px; margin-bottom:18px; }
.way:last-child { margin-bottom:0; }
.way h3 { font-size:1.24rem; margin-bottom:16px; }
.way-k { display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:7px; }
.way ol { margin:0; padding:0; list-style:none; counter-reset:w; }
.way li { counter-increment:w; padding:10px 0 10px 36px; position:relative; color:var(--muted); font-size:.95rem; border-bottom:1px dashed var(--line); }
.way li:last-child { border-bottom:0; }
.way li::before {
  content:counter(w,upper-roman); position:absolute; left:0; top:9px;
  width:24px; height:24px; border:1px solid var(--line-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.72rem; color:var(--gold);
}
.way li b { color:var(--bone-soft); font-weight:600; }
.way li code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.86em; background:rgba(198,154,76,.12); color:var(--gold-lite); padding:2px 7px; border-radius:4px; }
.paycard { background:var(--card); border:2.5px solid var(--gold); border-radius:16px; padding:16px 16px 22px; text-align:center; box-shadow:0 26px 50px rgba(0,0,0,.4); }
.paycard .cap { font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:6px 0 12px; }
.paycard img { width:100%; height:auto; border-radius:8px; border:1px solid var(--line-2); display:block; }
.paycard .upi { font-family:ui-monospace,"SF Mono",Menlo,monospace; color:var(--bone); font-size:.88rem; margin:14px 0 8px; word-break:break-all; }
.paycard hr { border:0; border-top:1px solid var(--line); margin:16px 20px; }
.paycard .pr { font-family:var(--serif); color:var(--muted); font-size:1.02rem; margin:5px 0; }
.paycard .pr b { color:var(--bone); font-weight:500; font-size:1.25rem; }
.paycard .note { color:var(--muted); font-size:.8rem; margin-top:12px; padding:0 10px; line-height:1.55; }
.pricenote { font-family:var(--serif); font-style:italic; color:var(--gold-lite); font-size:1.04rem; margin:-8px 0 22px; }

/* --- quote --- */
.quote { text-align:center; padding:clamp(80px,10vw,130px) 0; }
.quote .line {
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.7rem,4.4vw,3rem); color:var(--bone); max-width:22ch; margin:0 auto 22px;
  text-wrap:balance;
}
.quote .who { color:var(--gold); letter-spacing:.26em; text-transform:uppercase; font-size:.74rem; }

/* --- birth cards teaser: a fan of tap-to-flip fortune cards --- */
.bc-teaser { display:grid; grid-template-columns:1fr minmax(280px,420px); gap:clamp(26px,4.5vw,60px); align-items:center; }
@media (max-width:880px) { .bc-teaser { grid-template-columns:1fr; } }
.fan { position:relative; height:310px; }
.fan .fcard { position:absolute; width:170px; left:50%; top:50%; transform-origin:50% 92%; filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); cursor:pointer; }
.fan .fcard svg { width:100%; height:auto; }
.fan .fcard:focus-visible { outline:2px solid var(--gold); outline-offset:5px; border-radius:12px; }
.fan .f1 { transform:translate(-50%,-50%) rotate(-16deg) translateX(-52px); }
.fan .f2 { transform:translate(-50%,-52%); z-index:2; }
.fan .f3 { transform:translate(-50%,-50%) rotate(16deg) translateX(52px); }
.fan .fcard.flipped { z-index:6; }
.fan-inner { position:relative; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.7,.25,1); }
.fcard.flipped .fan-inner { transform:rotateY(180deg); }
.ff { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ff-back {
  position:absolute; inset:0; transform:rotateY(180deg);
  background:#321B26; border:2px solid var(--gold); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:18px 14px; text-align:center;
}
.ff-back::before { content:""; position:absolute; inset:7px; border:1px solid rgba(198,154,76,.5); border-radius:8px; pointer-events:none; }
.ff-back .fb-mark { width:28px; color:var(--gold); }
.ff-back .fb-k { font-size:.54rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.ff-back p { font-family:var(--serif); font-style:italic; color:var(--bone); font-size:.95rem; line-height:1.5; }
html.static-mode .fan-inner { transition:none; }

/* --- about --- */
.about-grid { display:grid; grid-template-columns:minmax(250px,360px) 1fr; gap:clamp(26px,4.5vw,60px); align-items:center; }
@media (max-width:820px) { .about-grid { grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.portrait-card {
  margin:0; background:var(--card); border:2.5px solid var(--gold);
  border-radius:16px; padding:12px 12px 4px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.portrait-card img { width:100%; height:auto; border-radius:8px; border:1px solid var(--line-2); display:block; }
.portrait-card figcaption {
  text-align:center; font-family:var(--serif); color:var(--gold-lite);
  letter-spacing:.22em; font-size:.8rem; padding:14px 0 10px; white-space:nowrap;
}
.pc-star { color:var(--gold); font-size:.75em; }
.about-txt p { margin-bottom:16px; }
.whybox {
  margin-top:26px; border-left:2px solid var(--gold);
  background:rgba(198,154,76,.06); padding:20px 24px; border-radius:0 10px 10px 0;
}
.whybox p { color:var(--muted); font-size:.93rem; margin:0; }
.whybox b { color:var(--bone); font-weight:600; }

/* --- booking --- */
.bookgrid { display:grid; grid-template-columns:1fr minmax(280px,360px); gap:24px; align-items:start; }
@media (max-width:920px) { .bookgrid { grid-template-columns:1fr; } }
.calbox { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; min-height:700px; }
.aside-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:30px 28px; margin-bottom:20px; }
.aside-card h3 { font-size:1.22rem; margin-bottom:10px; }
.aside-card p { color:var(--muted); font-size:.94rem; margin-bottom:18px; }
.aside-card .btn { width:100%; }
.contact-line { display:flex; align-items:center; gap:11px; color:var(--bone); font-size:.95rem; margin-bottom:12px; }
.contact-line svg { width:19px; color:var(--gold); flex:none; }
.contact-line a { color:var(--bone); }
.contact-line a:hover { color:var(--gold-lite); }

/* --- faq --- */
.faq { max-width:780px; }
details { border-bottom:1px solid var(--line); }
summary {
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:20px; padding:24px 4px;
  font-family:var(--serif); font-size:1.16rem; color:var(--bone);
}
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--gold); font-size:1.5rem; font-family:var(--sans); transition:transform .22s; flex:none; }
details[open] summary::after { transform:rotate(45deg); }
details .a { color:var(--muted); padding:0 4px 26px; max-width:66ch; }
details .a p { margin-bottom:10px; }

/* --- footer --- */
footer.foot {
  border-top:1px solid var(--line); padding:64px 0 120px;
  background:linear-gradient(180deg, transparent, rgba(23,13,17,.7));
}
.foot-grid { display:flex; flex-wrap:wrap; gap:38px; justify-content:space-between; align-items:flex-start; }
.foot-brand { display:flex; flex-direction:column; gap:14px; max-width:330px; }
.foot-brand em { font-family:var(--serif); color:var(--muted); }
.foot-col h4 { font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:15px; font-weight:600; }
.foot-col a { display:block; color:var(--bone-soft); font-size:.95rem; padding:4.5px 0; }
.foot-col a:hover { color:var(--gold-lite); }
.legal { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; max-width:74ch; }

/* --- floating whatsapp --- */
.wa-float {
  position:fixed; right:24px; bottom:24px; z-index:60; width:58px; height:58px;
  border-radius:50%; background:var(--gold); color:#241105;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.5); transition:transform .16s ease;
}
.wa-float:hover { transform:translateY(-3px); }
.wa-float svg { width:27px; }

/* --- reveal on scroll --- */
html.js .rv { opacity:0; }
html.js .rv.in { animation:rise .8s ease var(--d,0s) both; }
html.js .rv.in.done { animation:none; opacity:1; }
@keyframes rise {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:none; }
}
/* static mode: used when animations must be skipped entirely */
html.static-mode .rv, html.static-mode .rv.in { opacity:1 !important; animation:none !important; transform:none !important; }
html.static-mode .float-card, html.static-mode .scroll-cue::after, html.static-mode .mark .lid { animation:none !important; }
html.static-mode .flip-inner { transition:none !important; }

/* --- 3d tilt with light glare --- */
.tilt3d {
  position:relative; transform-style:preserve-3d; will-change:transform;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px)) scale(var(--sc,1));
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.tilt3d.tilting { transition:transform .05s linear; }
.glare3d {
  position:absolute; inset:2.5%; border-radius:16px; pointer-events:none; z-index:5;
  background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%), rgba(244,237,223,.28), rgba(244,237,223,0) 62%);
  opacity:var(--go,0); transition:opacity .45s ease; mix-blend-mode:screen;
}

/* idle levitation for the session card */
.levit { animation:levitate 7s ease-in-out infinite alternate; }
@keyframes levitate {
  from { transform:translateY(-6px) rotate(-.6deg); }
  to   { transform:translateY(8px) rotate(.7deg); }
}

/* the teaser fan spreads when hovered */
.fan .fcard { transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease; }
.fan:hover .f1 { transform:translate(-50%,-50%) rotate(-24deg) translateX(-96px) translateY(-12px); }
.fan:hover .f2 { transform:translate(-50%,-58%) scale(1.05); }
.fan:hover .f3 { transform:translate(-50%,-50%) rotate(24deg) translateX(96px) translateY(-12px); }
.fan:hover .fcard { filter:drop-shadow(0 26px 40px rgba(0,0,0,.6)); }

/* gold shine sweep across a freshly revealed card */
.flip-back .shine {
  position:absolute; inset:6px; border-radius:12px; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 32%, rgba(244,237,223,.25) 46%, rgba(198,154,76,.3) 52%, transparent 66%);
  background-size:240% 100%; background-position:130% 0;
}
.flip-back .shine.go { animation:sweep 1.15s ease both; }
@keyframes sweep {
  0%   { opacity:.95; background-position:130% 0; }
  100% { opacity:0;  background-position:-40% 0; }
}

/* ============================================================
   BIRTH CARDS PAGE
   ============================================================ */
.bc-hero { text-align:center; padding:clamp(150px,18vw,200px) 0 clamp(40px,5vw,60px); }
.bc-hero h1 { font-size:clamp(2.2rem,5.6vw,3.8rem); max-width:18ch; margin:0 auto 20px; text-wrap:balance; }
.bc-hero .sub { color:var(--muted); max-width:60ch; margin:0 auto; font-size:1.07rem; }

.bc-form {
  max-width:640px; margin:44px auto 0; background:rgba(34,18,25,.8);
  border:1px solid var(--line); border-radius:16px; padding:clamp(26px,4vw,40px);
  backdrop-filter:blur(6px);
}
.bc-fields { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; margin-bottom:22px; }
@media (max-width:560px) { .bc-fields { grid-template-columns:1fr; } }
.field label { display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; font-weight:600; }
.field select, .field input {
  width:100%; background:var(--page-2); border:1px solid var(--line-2); color:var(--bone);
  border-radius:6px; padding:14px 14px; font-family:var(--sans); font-size:1rem;
  appearance:none; -webkit-appearance:none;
}
.field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C69A4C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.bc-form .btn { width:100%; }
.bc-err { color:#E8A9A0; font-size:.9rem; margin-top:14px; text-align:center; min-height:1.4em; }

.bc-result { padding:clamp(30px,5vw,60px) 0 clamp(70px,9vw,110px); }
.bc-cards { display:flex; gap:clamp(18px,3.5vw,36px); justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.bc-slot { width:min(250px,72vw); text-align:center; }
.bc-role { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px; }
.flip { perspective:1300px; }
.flip-inner { position:relative; width:100%; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.flip.flipped .flip-inner { transform:rotateY(180deg); }
.flip-face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-face svg { width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.flip-front { position:relative; }
.flip-back { position:absolute; inset:0; transform:rotateY(180deg); }
.bc-name { font-family:var(--serif); color:var(--bone); font-size:1.25rem; margin:20px 0 4px; }
.bc-keys { color:var(--gold-lite); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }

.bc-read { max-width:720px; margin:34px auto 0; }
.bc-read .blk { background:rgba(34,18,25,.7); border:1px solid var(--line); border-radius:12px; padding:26px 28px; margin-bottom:16px; }
.bc-read .blk h3 { font-size:1.15rem; margin-bottom:8px; }
.bc-read .blk .rolecap { color:var(--gold); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; margin-bottom:10px; }
.bc-read .blk p { color:var(--bone-soft); font-size:.97rem; }
.bc-read .blk p.soul { margin-top:12px; color:var(--muted); font-style:italic; font-family:var(--serif); font-size:1.02rem; }

.bc-math {
  max-width:720px; margin:18px auto 0; text-align:center; color:var(--muted);
  font-size:.9rem; background:rgba(23,13,17,.5); border:1px dashed var(--line-2);
  border-radius:10px; padding:16px 20px;
}
.bc-math b { color:var(--gold-lite); font-weight:600; }
.bc-cta { text-align:center; margin-top:40px; }
.bc-cta p { color:var(--muted); margin-bottom:20px; font-size:1.02rem; }

.bc-note { max-width:720px; margin:56px auto 0; }
.bc-note h3 { font-size:1.25rem; margin-bottom:12px; }
.bc-note p { color:var(--muted); font-size:.95rem; margin-bottom:10px; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .rv, .rv.in { opacity:1; transform:none; animation:none; }
  .float-card, .scroll-cue::after, .mark .lid, .levit { animation:none !important; }
  .flip-inner { transition:none; }
  .btn, .wa-float { transition:none; }
  .tilt3d { transform:none !important; transition:none; }
  .glare3d, .flip-back .shine { display:none; }
  .fan .fcard { transition:none; }
  .fs-inner, .fan-inner { transition:none; }
}
html.static-mode .levit { animation:none !important; }
html.static-mode .flip-back .shine { display:none; }