/* Local Version 3 refinement: readable scale, bounded original art, less repetition. */
.purchase-first { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); align-items:center; gap:56px; padding:34px 0; border-bottom:1px solid var(--line); }
.purchase-first h1 { font-size:clamp(40px,4.2vw,57px); line-height:1.02; margin:0; }
.purchase-first-lead { max-width:500px; margin:18px 0; color:var(--muted); font-size:14px; line-height:1.8; }
.purchase-first-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; color:var(--ink); font-size:27px; line-height:1.3; margin:0 0 18px; }
.purchase-first-price > span { font-size:11px; letter-spacing:.06em; color:var(--gold); }
.purchase-first-price small { font-size:11px; color:var(--muted); margin-left:8px; }
.purchase-first-note { max-width:510px; margin-top:15px; font-size:10px; line-height:1.8; color:var(--muted); }
.purchase-first-image { width:100%; max-width:345px; margin:0 auto; }
.purchase-first-image img { display:block; width:100%; height:auto; border-radius:5px; }
.purchase-first-image figcaption { text-align:center; color:var(--muted); font-size:9px; margin-top:10px; }
.floating-product { position:relative; isolation:isolate; width:100%; aspect-ratio:1; }
.floating-product img { position:relative; z-index:2; background:transparent; border-radius:0; animation:product-levitation 6.8s ease-in-out infinite; filter:drop-shadow(0 13px 12px rgba(0,0,0,.28)); }
.floating-product::after { content:""; position:absolute; z-index:0; left:17%; right:17%; bottom:1%; height:8%; border-radius:50%; background:rgba(190,151,81,.15); filter:blur(12px); animation:product-shadow-breathe 6.8s ease-in-out infinite; pointer-events:none; }
.product-mist { position:absolute; z-index:1; inset:10% -4% -1%; pointer-events:none; }
.product-mist::before,.product-mist::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 26% 78%,rgba(167,153,205,.26),transparent 36%),radial-gradient(ellipse at 72% 70%,rgba(216,189,130,.22),transparent 37%),radial-gradient(ellipse at 50% 92%,rgba(151,182,188,.18),transparent 43%); filter:blur(15px); animation:product-mist-drift 10s ease-in-out infinite alternate; }
.product-mist::after { inset:21% 0 -4%; opacity:.7; animation-delay:-6s; animation-duration:13s; }
.product-motion-control { display:block; margin:8px auto 0; font-size:9px; }
@keyframes product-levitation { 0%,100% { transform:translateY(3px) rotate(-.65deg); } 42% { transform:translateY(-9px) rotate(.35deg); } 56% { transform:translateY(-11px) rotate(.5deg); } 74% { transform:translateY(-6px) rotate(.1deg); } }
@keyframes product-shadow-breathe { 0%,100% { transform:scaleX(1); opacity:.8; } 50% { transform:scaleX(.78); opacity:.4; } }
@keyframes product-mist-drift { from { transform:translate(-3%,-2%) scale(.97); opacity:.55; } to { transform:translate(3%,-7%) scale(1.05); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .floating-product img { transform:none; } .product-mist::before,.product-mist::after { opacity:.6; } }
.hero h2 { font-size:clamp(43px,4.8vw,64px); line-height:1.06; max-width:520px; }
@media(max-width:1050px) { .purchase-first { gap:30px; } .purchase-first-image { max-width:300px; } .hero h2 { font-size:clamp(42px,5vw,54px); } }
@media(max-width:780px) { .purchase-first { grid-template-columns:1fr; gap:18px; padding-block:28px; } .purchase-first-image { max-width:220px; order:-1; } .hero h2 { font-size:45px; } }
@media(max-width:600px) { .purchase-first h1 { font-size:clamp(35px,10vw,42px); } .purchase-first-lead { font-size:13px; margin-block:14px; } .purchase-first-price { font-size:25px; } .purchase-first-image { max-width:180px; } .purchase-first-note { font-size:9px; } .hero h2 { font-size:clamp(36px,10vw,43px); max-width:390px; } }
.wrap { width: min(1120px, 88%); }
h1 { font-size: clamp(40px, 4.7vw, 62px); line-height: 1.08; }
h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.1; }
h3 { font-size: 28px; }
.section { padding: 46px 0; }
.section-heading { gap: 32px; margin-bottom: 26px; }
.page-hero { padding: 42px 0 34px; }
.page-hero h1 { font-size: clamp(40px, 4.7vw, 62px); }
.eyebrow { margin-bottom: 14px; }
.lead { margin: 20px 0; }
.masthead { padding: 18px 0; gap: 20px; }
.wordmark { font-size: 24px; }
.site-nav { gap: 18px; }
.footer-main { margin-top: 26px; padding-top: 30px; gap: 35px; }
.hero { padding: 38px 0 34px; gap: 32px; }
.hero h1 { font-size: clamp(43px, 4.8vw, 64px); line-height: 1.06; max-width: 520px; }
.hero-copy { margin: 20px 0 23px; font-size: 14px; line-height: 1.85; }
.hero-facts { margin-top: 18px; letter-spacing: .06em; }
.oracle-stage { min-height: 365px; overflow: hidden; }
.moving-deck { height: 300px; }
.orbit-card { width: 61%; overflow: hidden; }
.orbit-card.left, .orbit-card.right { width: 45%; }
.orbit-card.front { transform: translate(-50%, -50%) rotate(-3deg); }
.orbit-card.left { transform: translate(-100%, -48%) rotate(-22deg); }
.orbit-card.right { transform: translate(-2%, -48%) rotate(22deg); }
.orbit-card svg { display: block; width: 100%; height: auto; overflow: hidden; }
.stage-caption { bottom: 3px; font-size: 8px; }
.stage-control { bottom: 28px; }
.hero-path > div, .hero-path > div + div { padding-block: 18px; }
.mini-gallery { gap: 32px; }
.card-doorway .card-art { width: 100%; max-width: 350px; margin-inline: auto; overflow: hidden; }
.card-doorway .card-art svg { display: block; width: 100%; height: auto; overflow: hidden; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.card-doorway .name { font-size: 28px; margin-top: 12px; }
.card-doorway .card-subtitle { display: block; font-size: 11px; color: var(--gold); margin: 4px 0 10px; }
.card-doorway .card-brief { display: block; max-width: 280px; margin: 0 auto 12px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.small-quote { padding: 34px 18px; }
.small-quote blockquote { font-size: clamp(27px, 3vw, 39px); }
.world-doorways { padding-bottom: 28px; gap: 32px; }
.world-doorway { padding: 25px 0; }
.world-doorway h2 { font-size: 36px; }
.world-doorway p { margin: 16px 0; }
.bottom-cta { padding: 38px 20px 42px; }
.bottom-cta h2 { font-size: clamp(33px, 3.4vw, 46px); }
.bottom-cta p { margin: 18px auto 22px; }
.product-hero { padding-block: 40px 32px; gap: 6%; }
.product-hero h1 { font-size: clamp(40px, 4.5vw, 60px); }
.product-box-figure { max-width: 430px; margin-inline: auto; }
.product-lead { font-size: 16px; margin: 20px 0; }
.product-inventory { padding-block: 24px; }
.inventory-number { font-size: 58px; min-width: 75px; }
.inventory-part h2 { font-size: 25px; }
.product-unity .section-heading h2, .product-connection-layout h2,
.product-storybook h2, .product-ritual h2 { font-size: clamp(31px, 3.3vw, 44px); }
.wisdom-map { gap: 24px; }
.wisdom-entry h3 { font-size: 28px; }
.connection-figure { max-width: 460px; margin-inline: auto; }
.storybook-page-count { font-size: 56px; margin-top: 20px; }
.ritual-sequence li { padding-bottom: 20px; margin-bottom: 21px; }
.ritual-sequence h3 { font-size: 28px; }
.product-paths > h2 { font-size: 38px; margin-bottom: 24px; }
.product-path-links > a { padding-block: 18px; }
.product-path-links h3 { font-size: 28px; }
.product-final h2, .card-gallery-final h2 { font-size: clamp(34px, 3.7vw, 48px); }
.exit-dialog h2 { font-size: 38px; }
.exit-dialog { padding: 30px; }
.guidebook-note { font-size: 11px; color: var(--muted); line-height: 1.8; }
.realm-doors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.realm-door { border-top: 2px solid var(--realm-tone); padding: 22px 0 12px; }
.realm-door.material { --realm-tone: #8d91d1; }
.realm-door.ethereal { --realm-tone: #a3a2b5; }
.realm-door.spiritual { --realm-tone: #d8bd82; }
.realm-door h3 { font-size: 28px; margin: 5px 0 14px; }
.realm-door p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.realm-door .eyebrow { font-size: 9px; color: var(--realm-tone); }
.realm-traveller { font-size: 12px; color: var(--muted); padding-top: 22px; border-top: 1px solid var(--line); margin: 18px 0 0; }
.guidebook-detail { grid-column: 1 / -1; border-block: 1px solid var(--line); padding: 17px 0; }
.guidebook-detail summary { cursor: pointer; color: var(--gold); font-size: 13px; }
.guidebook-detail p { font-size: 13px; color: var(--muted); margin: 20px 0; max-width: 720px; }
.wheel-positions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 25px; padding: 0; list-style: none; }
.wheel-positions li { font-size: 12px; color: var(--muted); }
.wheel-positions strong { display: block; font-size: 13px; color: var(--ink); font-weight: 500; }
/* Content stays visible even without a scroll observer or with paused motion. */
.reveal-in { opacity: 1; transform: none; transition: none; }
.reveal-in.is-visible { animation: section-arrive .65s ease both; }
.motion-paused .reveal-in { animation: none; opacity: 1; transform: none; }
@keyframes section-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-in.is-visible { animation: none; }
}
@media (max-width: 1050px) {
  .hero h1 { font-size: clamp(42px, 5vw, 54px); }
  .oracle-stage { min-height: 330px; }
  .moving-deck { height: 265px; }
  .site-nav { gap: 13px; }
}
@media (max-width: 780px) {
  .page-hero { padding-top: 32px; }
  .masthead { padding-block: 17px; }
  .hero h1 { font-size: 45px; }
  .two-col { gap: 28px; }
  .section { padding-block: 34px; }
  .oracle-stage { min-height: 290px; }
  .moving-deck { height: 225px; }
}
@media (max-width: 600px) {
  .wrap { width: 88%; }
  .hero { padding-top: 29px; gap: 18px; }
  .hero h1 { font-size: clamp(36px, 10vw, 43px); max-width: 390px; }
  .hero-copy { margin-block: 18px 21px; font-size: 13px; }
  .hero-facts { font-size: 8px; margin-top: 16px; }
  .hero-secondary { font-size: 10px; }
  .oracle-stage { min-height: 260px; }
  .moving-deck { height: 210px; }
  .stage-caption { font-size: 7px; letter-spacing: .12em; }
  .hero-path > div, .hero-path > div + div { padding-block: 15px; }
  .hero-path h3 { font-size: 26px; }
  .hero-path .eyebrow { font-size: 8px; margin-bottom: 4px; }
  .section { padding-block: 32px; }
  .section-heading > p { margin-top: 15px; }
  h2 { font-size: 33px; }
  .page-hero h1 { font-size: 39px; }
  .mini-gallery { grid-template-columns: 1fr; gap: 26px; }
  .card-doorway { display: grid; grid-template-columns: 42% 1fr; column-gap: 17px; text-align: left; align-items: start; padding: 0; }
  .card-doorway .card-art { grid-column: 1; grid-row: 1 / 6; align-self: center; }
  .card-doorway .name { margin-top: 0; font-size: 27px; }
  .card-doorway .card-subtitle { font-size: 10px; margin: 2px 0 6px; }
  .card-doorway .card-brief { font-size: 11px; margin: 0 0 7px; }
  .card-doorway .meta { letter-spacing: .05em; font-size: 8px; }
  .small-quote { padding-block: 28px; }
  .small-quote blockquote { font-size: 29px; }
  .world-doorway h2 { font-size: 33px; }
  .world-doorway .symbol { font-size: 30px; top: 25px; }
  .bottom-cta { padding-inline: 0; }
  .bottom-cta h2 { font-size: 35px; }
  .product-hero { gap: 25px; padding-block: 30px; }
  .product-hero h1 { font-size: 40px; }
  .product-box-figure { max-width: 290px; }
  .product-hero-copy > .muted { font-size: 13px; }
  .inventory-number { font-size: 55px; min-width: 66px; }
  .inventory-part { gap: 17px; }
  .inventory-part h2 { font-size: 24px; }
  .product-connection-layout { gap: 24px; }
  .connection-figure { max-width: 330px; }
  .storybook-page-count { font-size: 47px; }
  .product-storybook h2, .product-connection-layout h2 { font-size: 33px; }
  .product-final h2, .card-gallery-final h2 { font-size: 36px; }
  .exit-dialog h2 { font-size: 33px; }
  .realm-doors { grid-template-columns: 1fr; gap: 12px; }
  .realm-door { padding-top: 17px; }
  .realm-door h3 { font-size: 27px; }
  .wheel-positions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 36px; }
  .page-hero h1, .product-hero h1 { font-size: 35px; }
  .oracle-stage { min-height: 225px; }
  .moving-deck { height: 175px; }
}

/* A coordinated reveal: open the fan, give each original card a clear foreground moment. */
.oracle-stage { min-height: 400px; }
.moving-deck { height: 340px; perspective: 1100px; transform-style: flat; }
.orbit-card { top: 46%; backface-visibility: hidden; }
.orbit-card.front {
  width: 54%; z-index: 3;
  transform: translate(-50%, -53%) translateZ(45px) rotate(-3deg) scale(1.02);
  animation: oracle-front-reveal 12s ease-in-out infinite;
}
.orbit-card.left {
  width: 33.5%; z-index: 1;
  transform: translate(-104%, -52%) translateZ(-20px) rotate(-12deg);
  animation: oracle-left-reveal 12s ease-in-out infinite;
}
.orbit-card.right {
  width: 33.5%; z-index: 2;
  transform: translate(12%, -52%) translateZ(-20px) rotate(12deg);
  animation: oracle-right-reveal 12s ease-in-out infinite;
}
@keyframes oracle-front-reveal {
  0%, 100% { transform: translate(-50%, -53%) translateZ(45px) rotate(-3deg) scale(1.02); z-index: 3; }
  12% { transform: translate(-50%, -61%) translateZ(75px) rotate(2deg) scale(1.08); z-index: 3; }
  25%, 78% { transform: translate(-50%, -43%) translateZ(-30px) rotate(-2deg) scale(.88); z-index: 1; }
  89% { transform: translate(-50%, -48%) translateZ(15px) rotate(-3deg) scale(.97); z-index: 3; }
}
@keyframes oracle-left-reveal {
  0%, 100% { transform: translate(-104%, -52%) translateZ(-20px) rotate(-12deg) scale(1); z-index: 1; }
  16% { transform: translate(-126%, -62%) translateZ(0) rotate(-16deg) scale(1); z-index: 2; }
  28% { transform: translate(-82%, -60%) translateZ(35px) rotate(-5deg) scale(1.3); z-index: 4; }
  40% { transform: translate(-78%, -64%) translateZ(55px) rotate(3deg) scale(1.33); z-index: 4; }
  52%, 76% { transform: translate(-126%, -50%) translateZ(0) rotate(-12deg) scale(1); z-index: 2; }
  90% { transform: translate(-108%, -52%) translateZ(-10px) rotate(-12deg) scale(1); z-index: 1; }
}
@keyframes oracle-right-reveal {
  0%, 100% { transform: translate(12%, -52%) translateZ(-20px) rotate(12deg) scale(1); z-index: 2; }
  16%, 44% { transform: translate(26%, -54%) translateZ(0) rotate(16deg) scale(1); z-index: 2; }
  58% { transform: translate(-18%, -60%) translateZ(35px) rotate(5deg) scale(1.3); z-index: 4; }
  72% { transform: translate(-22%, -64%) translateZ(55px) rotate(-3deg) scale(1.33); z-index: 4; }
  84% { transform: translate(26%, -50%) translateZ(0) rotate(12deg) scale(1); z-index: 2; }
}
@media (max-width: 1050px) {
  .oracle-stage { min-height: 355px; }
  .moving-deck { height: 295px; }
}
@media (max-width: 780px) {
  .oracle-stage { min-height: 315px; }
  .moving-deck { height: 255px; }
}
@media (max-width: 600px) {
  .oracle-stage { min-height: 290px; }
  .moving-deck { height: 230px; }
}
@media (max-width: 360px) {
  .oracle-stage { min-height: 250px; }
  .moving-deck { height: 195px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-card.front { transform: translate(-50%, -53%) rotate(-3deg) scale(1.02); }
  .orbit-card.left { transform: translate(-126%, -52%) rotate(-12deg); }
  .orbit-card.right { transform: translate(26%, -52%) rotate(12deg); }
}