/* =====================================================================
   Rotunda gloss — atmosphere layer from the ENTP 1010 + COMM 2003 decks.
   Space gradients + starfields on dark surfaces, drifting orange glow
   on paper, orange→pink gradient accents, underline accents, orbit
   rings, scroll entrances, and brand-skin hover veils on project cards.

   Gating (data attrs on .ro-page, driven by Tweaks):
     data-gloss:  off | subtle | full
     data-motion: off | ambient | full   (full = ambient + entrances)
     data-accent: on | off               (orange→pink gradient accents)
   ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes roDrift    { from { background-position: 0 0; } to { background-position: 0 -640px; } }
@keyframes roDrift2   { from { background-position: 0 0; } to { background-position: 0 -680px; } }
@keyframes roTwinkle  { from { opacity: .35; } to { opacity: 1; } }
@keyframes roFloat    { from { transform: translate3d(0,0,0); } to { transform: translate3d(-36px,26px,0); } }
@keyframes roSpin     { to { transform: rotate(360deg); } }

/* ---------- Shared fx scaffolding ---------- */
.ro-fx {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ro-stars, .ro-stars-b, .ro-fx-glow { position: absolute; inset: 0; }
.ro-stars {
  background-image:
    radial-gradient(2px 2px at 42px 68px, rgba(251,247,238,.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 188px 132px, rgba(251,247,238,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 310px 44px, rgba(251,247,238,.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 254px 258px, rgba(240,160,85,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 92px 208px, rgba(251,247,238,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 372px 176px, rgba(251,247,238,.65) 50%, transparent 51%);
  background-size: 420px 320px;
  animation: roDrift 120s linear infinite;
}
.ro-stars-b {
  background-image:
    radial-gradient(1.5px 1.5px at 120px 40px, rgba(251,247,238,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 340px 240px, rgba(251,247,238,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 210px 190px, rgba(251,247,238,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 30px 280px, rgba(240,160,85,.6) 50%, transparent 51%);
  background-size: 460px 340px;
  animation: roTwinkle 3.8s ease-in-out infinite alternate, roDrift2 180s linear infinite;
}
.ro-fx-glow {
  background:
    radial-gradient(1000px 560px at 80% 10%, rgba(229,114,0,.13), transparent 62%),
    radial-gradient(1300px 800px at 8% 92%, rgba(47,58,92,.6), transparent 66%);
  animation: roFloat 16s ease-in-out infinite alternate;
}

/* Orbit ring w/ glowing dot (ENTP title motif) */
.ro-orbit {
  position: absolute; top: -420px; right: -460px;
  width: 1100px; height: 1100px;
  pointer-events: none; z-index: 0;
}
.ro-orbit-ring {
  position: absolute; inset: 0;
  border: 1px solid rgba(244,239,230,.16); border-radius: 50%;
  animation: roSpin 90s linear infinite;
}
.ro-orbit-dot {
  position: absolute; top: -5px; left: 50%;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 20px rgba(229,114,0,.9);
}
.ro-orbit-ring2 {
  position: absolute; inset: 130px;
  border: 1px solid rgba(244,239,230,.12); border-radius: 50%;
}
.ro-orbit.is-cta { top: -560px; right: -380px; width: 900px; height: 900px; }
.ro-orbit.is-cta .ro-orbit-ring2 { inset: 110px; }

/* ---------- Hero skins ---------- */
.ro-hero.is-space {
  background: linear-gradient(155deg, #2F3A5C 0%, #232D4B 32%, #161D36 66%, #0C1122 100%);
}
.ro-hero:not(.is-space) .ro-stars,
.ro-hero:not(.is-space) .ro-stars-b { display: none; }
.ro-hero:not(.is-space) .ro-fx-glow {
  background: radial-gradient(1000px 560px at 80% 10%, rgba(229,114,0,.10), transparent 62%);
}

/* ---------- Dark sections → night sky ---------- */
.ro-cta {
  background: linear-gradient(165deg, #2F3A5C 0%, #232D4B 38%, #161D36 100%);
}
.ro-footer {
  background: linear-gradient(180deg, #161D36 0%, #0C1122 100%);
}

/* ---------- Paper sections → drifting warm glow ---------- */
.ro-section { position: relative; }
.ro-glow {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% 8%, rgba(229,114,0,.07), transparent 62%),
    radial-gradient(900px 560px at 6% 88%, rgba(229,114,0,.05), transparent 60%);
  animation: roFloat 18s ease-in-out infinite alternate;
}

/* ---------- Section-mark rule bar ---------- */
.ro-section-mark::after {
  content: ""; display: block;
  width: 52px; height: 5px; margin-top: 14px;
  background: var(--orange);
}
.ro-cta-eyebrow::after {
  content: ""; display: block;
  width: 52px; height: 5px; margin-top: 16px;
  background: var(--orange);
}

/* ---------- Underline accent behind italic accent words ---------- */
.ro-section-title em,
.ro-news h3 em,
.ro-hero h1 em,
.ro-cta h2 em {
  background-image: linear-gradient(90deg, rgba(229,114,0,.30), rgba(229,114,0,.30));
  background-size: 100% 0.13em;
  background-position: 0 0.92em;
  background-repeat: no-repeat;
}

/* ---------- Orange→pink gradient accents (data-accent="on") ---------- */
[data-accent="on"] .ro-section-mark::after,
[data-accent="on"] .ro-cta-eyebrow::after {
  background: linear-gradient(90deg, #E57200, #EF3F6B);
}
[data-accent="on"] .ro-section-title em,
[data-accent="on"] .ro-news h3 em,
[data-accent="on"] .ro-hero h1 em,
[data-accent="on"] .ro-cta h2 em {
  background-image: linear-gradient(90deg, rgba(229,114,0,.38), rgba(239,63,107,.38));
}
[data-accent="on"] .ro-btn-primary,
[data-accent="on"] .ro-news-form button,
[data-accent="on"] .ro-cta-side a.is-primary {
  background: linear-gradient(120deg, #E57200 0%, #EF3F6B 100%);
  border-color: transparent;
}
[data-accent="on"] .ro-btn-primary:hover,
[data-accent="on"] .ro-news-form button:hover,
[data-accent="on"] .ro-cta-side a.is-primary:hover {
  background: linear-gradient(120deg, #C05F00 0%, #D63258 100%);
}
[data-accent="on"] .ro-ops-card.is-fill {
  background: linear-gradient(158deg, #E57200 0%, #EF3F6B 100%);
}

/* ---------- Gloss intensity gating ---------- */
[data-gloss="off"] .ro-fx,
[data-gloss="off"] .ro-orbit,
[data-gloss="off"] .ro-glow { display: none; }
[data-gloss="off"] .ro-hero.is-space { background: var(--navy); }
[data-gloss="off"] .ro-cta,
[data-gloss="off"] .ro-footer { background: var(--navy); }
[data-gloss="off"] .ro-section-mark::after,
[data-gloss="off"] .ro-cta-eyebrow::after { display: none; }
[data-gloss="off"] .ro-section-title em,
[data-gloss="off"] .ro-news h3 em,
[data-gloss="off"] .ro-hero h1 em,
[data-gloss="off"] .ro-cta h2 em { background-image: none; }

[data-gloss="subtle"] .ro-fx,
[data-gloss="subtle"] .ro-orbit,
[data-gloss="subtle"] .ro-glow { opacity: .5; }

/* ---------- Motion gating ---------- */
[data-motion="off"] .ro-stars,
[data-motion="off"] .ro-stars-b,
[data-motion="off"] .ro-fx-glow,
[data-motion="off"] .ro-glow,
[data-motion="off"] .ro-orbit-ring { animation: none !important; }

/* Entrances — only at motion: full. Base state stays visible otherwise. */
[data-motion="full"] .ro-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-motion="full"] .ro-reveal.is-in { opacity: 1; transform: none; }
[data-motion="full"] .ro-now-card.ro-reveal:nth-child(2),
[data-motion="full"] .ro-making-card.ro-reveal:nth-child(2),
[data-motion="full"] .ro-ops-card.ro-reveal:nth-child(2) { transition-delay: .12s; }
[data-motion="full"] .ro-now-card.ro-reveal:nth-child(3),
[data-motion="full"] .ro-making-card.ro-reveal:nth-child(3),
[data-motion="full"] .ro-ops-card.ro-reveal:nth-child(3) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .ro-stars, .ro-stars-b, .ro-fx-glow, .ro-glow, .ro-orbit-ring { animation: none !important; }
  [data-motion="full"] .ro-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Brand-skin hover veils — project cards transform into their brand
   on hover / keyboard focus. Whole card becomes the link.
   ===================================================================== */
.ro-making-card.has-brand { position: relative; overflow: hidden; }
.ro-making-card.has-brand .ro-making-link { position: static; }
.ro-making-card.has-brand .ro-making-link::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}
.ro-brand-veil {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .32s ease, transform .32s ease;
  pointer-events: none;
}
.ro-making-card.has-brand:hover .ro-brand-veil,
.ro-making-card.has-brand:focus-within .ro-brand-veil {
  opacity: 1; transform: none;
}
.ro-brand-top {
  display: flex; align-items: center; gap: 12px;
}
.ro-brand-top img {
  width: 26px; height: 26px; display: block;
  border-radius: 4px;
}
.ro-brand-domain {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.ro-brand-name { margin: 0; }
.ro-brand-tag { margin: 10px 0 0; }
.ro-brand-foot {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}

/* --- Marketing Machine — black + the system's orange→pink gradient --- */
.is-brand-mm .ro-brand-veil { background: #0E0E12; color: #F4EFE6; }
.is-brand-mm .ro-brand-domain { color: rgba(244,239,230,.6); }
.is-brand-mm .ro-brand-name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 40px; line-height: 1.02; letter-spacing: -0.018em;
  background: linear-gradient(100deg, #E37325 10%, #EF3F6B 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-brand-mm .ro-brand-tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; line-height: 1.4; color: rgba(244,239,230,.82);
}
.is-brand-mm .ro-brand-foot { color: #EF3F6B; }
.ro-making-card.is-brand-mm:hover { border-color: #EF3F6B; }

/* --- FounderMode — its real purple + arcade pixel type --- */
.is-brand-fm .ro-brand-veil {
  background: #7D6BF0; color: #fff;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.22);
}
.is-brand-fm .ro-brand-domain { color: rgba(255,255,255,.75); }
.is-brand-fm .ro-brand-name {
  font-family: "VT323", var(--font-mono), monospace;
  font-size: 52px; line-height: .9; letter-spacing: .02em;
  text-shadow: 3px 3px 0 rgba(30,20,90,.45);
}
.is-brand-fm .ro-brand-tag {
  font-family: "VT323", var(--font-mono), monospace;
  font-size: 23px; line-height: 1.25; color: rgba(255,255,255,.9);
  text-transform: uppercase; letter-spacing: .04em;
}
.is-brand-fm .ro-brand-hud {
  margin-top: 18px;
  font-family: "VT323", var(--font-mono), monospace;
  font-size: 20px; letter-spacing: .04em;
  color: #1E145A; background: rgba(255,255,255,.85);
  padding: 8px 12px; display: inline-block;
}
.is-brand-fm .ro-brand-foot {
  font-family: "VT323", var(--font-mono), monospace;
  font-size: 22px; letter-spacing: .08em; color: #fff;
}
.ro-making-card.is-brand-fm:hover { border-color: #7D6BF0; }

/* --- Hypercontext — deep slate + cyan node grid --- */
.is-brand-hc .ro-brand-veil {
  background: #0B1220;
  background-image: radial-gradient(rgba(34,211,238,.28) 1px, transparent 1.5px);
  background-size: 22px 22px;
  color: #E8F7FA;
}
.is-brand-hc .ro-brand-domain { color: #22D3EE; }
.is-brand-hc .ro-brand-name {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 30px; line-height: 1.1; letter-spacing: -0.01em;
  text-transform: lowercase; color: #fff;
}
.is-brand-hc .ro-brand-name span { color: #22D3EE; }
.is-brand-hc .ro-brand-tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; line-height: 1.4; color: rgba(232,247,250,.78);
}
.is-brand-hc .ro-brand-foot { color: #22D3EE; }
.ro-making-card.is-brand-hc:hover { border-color: #22D3EE; }

/* --- Foundry pair — the Foundry gradient, on-system --- */
.is-brand-fc .ro-brand-veil,
.is-brand-ct .ro-brand-veil {
  background: linear-gradient(158deg, #E37325 0%, #EF3F6B 100%);
  color: #fff; padding: 24px;
}
.is-brand-ct .ro-brand-veil {
  background: linear-gradient(158deg, #232D4B 0%, #161D36 100%);
}
.is-brand-fc .ro-brand-domain,
.is-brand-ct .ro-brand-domain { color: rgba(255,255,255,.78); }
.is-brand-ct .ro-brand-domain { color: var(--orange-2); }
.is-brand-fc .ro-brand-name,
.is-brand-ct .ro-brand-name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 34px; line-height: 1.02; letter-spacing: -0.016em; color: #fff;
}
.is-brand-ct .ro-brand-name { color: var(--cream); }
.is-brand-fc .ro-brand-tag,
.is-brand-ct .ro-brand-tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: 17px; line-height: 1.4; color: rgba(255,255,255,.88);
}
.is-brand-fc .ro-brand-foot { color: #fff; }
.is-brand-ct .ro-brand-foot { color: var(--orange-2); }
.ro-making-card.is-brand-fc:hover { border-color: #EF3F6B; }
.ro-making-card.is-brand-ct:hover { border-color: var(--orange); }

/* Ops (Publishing) cards use the same veil mechanics */
.ro-ops-card.has-brand { position: relative; overflow: hidden; }
.ro-ops-card.has-brand .ro-ops-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}
.ro-ops-card.has-brand:hover .ro-brand-veil,
.ro-ops-card.has-brand:focus-within .ro-brand-veil {
  opacity: 1; transform: none;
}

/* --- Zengineering — warm ink + enso, zen meets engineering --- */
.is-brand-zg .ro-brand-veil { background: #17140F; color: #F4EFE6; }
.ro-brand-enso {
  position: absolute; right: -42px; top: -42px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid rgba(244,239,230,.26);
  border-top-color: transparent;
  transform: rotate(38deg);
  pointer-events: none;
}
.is-brand-zg .ro-brand-domain { color: #D9A441; }
.is-brand-zg .ro-brand-name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 34px; line-height: 1.02; letter-spacing: -0.016em; color: #F4EFE6;
}
.is-brand-zg .ro-brand-name em { color: #D9A441; font-style: italic; font-weight: 400; }
.is-brand-zg .ro-brand-tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: 17px; line-height: 1.45; color: rgba(244,239,230,.8);
}
.is-brand-zg .ro-brand-foot { color: #D9A441; }

/* --- Juris — local-AI negotiation terminal --- */
.is-brand-jp .ro-brand-veil {
  background: #0E1210; color: #DCEFE2;
  background-image: linear-gradient(rgba(63,191,127,.05) 1px, transparent 1px);
  background-size: 100% 8px;
}
.is-brand-jp .ro-brand-domain { color: #3FBF7F; }
.is-brand-jp .ro-brand-name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 32px; line-height: 1.06; letter-spacing: -0.014em; color: #DCEFE2;
}
.is-brand-jp .ro-brand-name em { color: #3FBF7F; font-style: italic; font-weight: 400; }
.is-brand-jp .ro-brand-tag {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; line-height: 1.6; letter-spacing: .06em;
  color: rgba(220,239,226,.72); text-transform: uppercase;
}
.is-brand-jp .ro-brand-foot { color: #3FBF7F; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ro-orbit { top: -520px; right: -560px; }
}
@media (max-width: 620px) {
  .ro-orbit { display: none; }
  .ro-brand-veil { padding: 24px; }
  .is-brand-fm .ro-brand-name { font-size: 40px; }
  .is-brand-mm .ro-brand-name { font-size: 32px; }
}