/* Rising Seer — Archetype section (lives directly under the hero, above Rarity).
   Design tokens mirror hero-v3.css. Fonts (Montserrat + Cormorant Garamond) are
   provided by the shared `rising-seer-hero-v3-fonts` enqueue. */
.archetype-section{
  --gold:#FFBD59; --gold-lt:#FFD98A; --ink:#110015; --plum:#3B003A;
  --magenta:#DA02A7; --subtext:#D6D6E0; --rule:rgba(255,205,140,0.16);

  position:relative; isolation:isolate; overflow:hidden;
  display:flex; justify-content:center;
  padding:clamp(88px,12vh,150px) clamp(16px,4vw,40px);
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:#fff;
  background:
    radial-gradient(65% 46% at 50% 20%, rgba(255,189,89,0.14), rgba(218,2,167,0.10) 42%, rgba(59,0,58,0) 72%),
    radial-gradient(120% 80% at 50% 118%, rgba(218,2,167,0.24), rgba(59,0,58,0.05) 58%, rgba(17,0,21,0) 80%),
    linear-gradient(180deg, #140019 0%, #1b0022 46%, #130017 100%);
}
.archetype-section *{box-sizing:border-box}
/* hero hands off at the top; rarity picks up at the bottom */
.archetype-section::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(120px,18vh,200px);
  background:linear-gradient(180deg,#110015 0%, rgba(17,0,21,0.5) 48%, rgba(17,0,21,0) 100%);
  z-index:2; pointer-events:none;
}
.archetype-sky{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9}

/* ---- glass box: 3-row grid ---------------------------------------------- */
.archetype-panel{
  position:relative; z-index:4; width:min(1040px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  grid-template-areas:"head head" "body anim" "cta cta";
  padding:clamp(30px,4vw,54px);
  border-radius:28px;
  background:linear-gradient(158deg, rgba(59,0,58,0.52) 0%, rgba(17,0,21,0.60) 100%);
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 60px 150px -45px rgba(0,0,0,0.78), 0 0 80px rgba(218,2,167,0.10), inset 0 1px 0 rgba(255,255,255,0.07);
}
.archetype-panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,189,89,0.55) 0%, rgba(255,189,89,0.12) 22%, rgba(255,189,89,0) 45%,
    rgba(255,189,89,0) 58%, rgba(218,2,167,0.20) 82%, rgba(218,2,167,0.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* Row 1 — subtext + headline */
.archetype-head{grid-area:head; padding-bottom:clamp(22px,2.6vw,32px); border-bottom:1px solid var(--rule); text-align:left}
.archetype-eyebrow{font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--subtext); opacity:.92; margin:0 0 14px}
.archetype-eyebrow-brand{color:var(--gold)}
.archetype-eyebrow-dot{color:var(--gold); opacity:.6; margin:0 .3em}
.archetype-h1{font-weight:700; font-size:clamp(30px,4.6vw,52px); line-height:1.02; letter-spacing:-0.02em; text-wrap:balance; text-shadow:0 2px 30px rgba(17,0,21,0.6); margin:0}
.archetype-h1 .serif{font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:600; font-size:1.32em; letter-spacing:.005em; color:var(--gold-lt)}

/* Row 2 left — body */
.archetype-body{
  grid-area:body;
  padding:clamp(24px,3vw,40px) clamp(28px,3.4vw,48px) clamp(24px,3vw,40px) 0;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.archetype-lead{margin:0; font-size:clamp(16px,1.5vw,19px); line-height:1.5; font-weight:500; color:#fff; max-width:48ch}
.archetype-text{margin:0; font-size:clamp(14px,1.2vw,16px); line-height:1.62; color:var(--subtext); max-width:52ch}
.archetype-text em{font-style:normal; color:var(--gold-lt); font-weight:600}
.archetype-prompt{margin:4px 0 0; font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:600; font-size:clamp(21px,2.4vw,28px); color:#fff; letter-spacing:.01em}
/* animated gold arrow pointing down toward the primary (gold) button */
.archetype-point{align-self:flex-start; display:inline-flex; margin-top:2px; color:var(--gold); animation:archetype-point 1.8s ease-in-out infinite}
.archetype-point svg{width:26px; height:26px; display:block; filter:drop-shadow(0 0 6px rgba(255,189,89,0.55))}
@keyframes archetype-point{0%,100%{transform:translateY(0); opacity:.7}50%{transform:translateY(7px); opacity:1}}

/* Row 2 right — animated sigil */
.archetype-anim{
  grid-area:anim;
  padding:clamp(24px,3vw,40px) 0 clamp(24px,3vw,40px) clamp(28px,3.4vw,48px);
  border-bottom:1px solid var(--rule);
  display:grid; place-items:center; min-height:clamp(220px,26vw,320px);
}
.archetype-glyph{position:relative; width:min(300px,88%); aspect-ratio:1; display:grid; place-items:center; animation:archetype-float 8s ease-in-out infinite}
@keyframes archetype-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.archetype-glyph::before{content:""; position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,189,89,0.30), rgba(218,2,167,0.12) 45%, rgba(255,189,89,0) 70%);
  filter:blur(6px); animation:archetype-aura 6s ease-in-out infinite; z-index:0}
@keyframes archetype-aura{0%,100%{opacity:.55; transform:scale(.96)}50%{opacity:1; transform:scale(1.05)}}
.archetype-glyph svg{position:relative; z-index:1; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 6px 24px rgba(255,189,89,0.25))}
.archetype-orbit{transform-origin:125px 125px; animation:archetype-orbit 34s linear infinite; stroke:rgba(255,189,89,0.28); stroke-width:1; fill:none; stroke-dasharray:3 9}
@keyframes archetype-orbit{to{transform:rotate(360deg)}}

/* sigil parts assemble when the section scrolls into view */
.archetype-ap{transform-origin:125px 125px; opacity:0}
.archetype-anim.is-visible .archetype-ap{animation:archetype-ap-in .7s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards}
.archetype-anim.is-visible .archetype-ap.node{animation:archetype-ap-in .7s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards, archetype-node 3.4s ease-in-out calc(var(--d) + .9s) infinite}
@keyframes archetype-ap-in{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:scale(1)}}
@keyframes archetype-node{0%,100%{filter:drop-shadow(0 0 0 rgba(255,189,89,0))}50%{filter:drop-shadow(0 0 6px rgba(255,205,120,0.9))}}

/* Row 3 — buttons (full width, left, side-by-side) */
.archetype-cta{grid-area:cta; padding-top:clamp(22px,2.6vw,32px); display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap}
.archetype-btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  font-family:'Montserrat', sans-serif; font-size:15px; letter-spacing:.015em; line-height:1.2;
  padding:15px 26px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; text-align:center;
  transition:transform .18s ease, filter .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.archetype-btn .arrow{transition:transform .18s ease; flex:0 0 auto}
.archetype-btn:hover .arrow{transform:translateX(3px)}
.archetype-btn:focus-visible{outline:2px solid var(--gold-lt); outline-offset:3px}
.archetype-btn-primary{position:relative; overflow:hidden; background:var(--gold); color:#310031; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 24px -8px rgba(255,189,89,0.55), 0 0 24px rgba(255,189,89,0.22)}
.archetype-btn-primary::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-18deg); animation:archetype-shimmer 4.2s ease-in-out 1.2s infinite; pointer-events:none}
@keyframes archetype-shimmer{0%{left:-60%}55%{left:130%}100%{left:130%}}
.archetype-btn-primary:hover{filter:brightness(1.07); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 1px rgba(255,189,89,0.4), 0 10px 32px -6px rgba(255,189,89,0.7), 0 0 32px rgba(255,189,89,0.4)}
.archetype-btn-ghost{background:rgba(255,255,255,0.03); color:var(--gold); font-weight:500; border:1.5px solid rgba(255,189,89,0.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.archetype-btn-ghost:hover{background:rgba(255,189,89,0.10); transform:translateY(-1px)}

/* scroll-in reveal (mirrors the site's .reveal convention) */
.archetype-section .reveal{opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms)}
.archetype-section .reveal.is-visible{opacity:1; transform:none}

/* ---- responsive: stack to one column ------------------------------------ */
@media (max-width:820px){
  .archetype-panel{grid-template-columns:1fr; grid-template-areas:"head" "anim" "body" "cta"; padding:clamp(28px,6vw,40px)}
  .archetype-head{text-align:center; padding-bottom:clamp(18px,5vw,26px)}
  .archetype-anim{padding:clamp(20px,6vw,30px) 0; min-height:0}
  .archetype-glyph{width:min(210px,58%)}
  .archetype-body{border-right:none; padding:clamp(20px,6vw,30px) 0; text-align:center; align-items:center}
  .archetype-lead,.archetype-text{margin-left:auto; margin-right:auto}
  .archetype-point{align-self:center}
  .archetype-cta{justify-content:center}
  .archetype-btn{flex:0 1 auto; min-width:0; white-space:nowrap; font-size:15px; padding:14px 22px}
}
@media (max-width:380px){.archetype-btn{font-size:13px; padding:12px 10px}}

@media (prefers-reduced-motion:reduce){
  .archetype-glyph,.archetype-glyph::before,.archetype-orbit,.archetype-btn-primary::after,.archetype-point{animation:none}
  .archetype-section .reveal{opacity:1; transform:none; transition:none}
  .archetype-ap,.archetype-anim.is-visible .archetype-ap{opacity:1; animation:none; transform:none}
}