/* =====================================================================
   youuai.ai — site styles. Built on assets/sacred.css tokens (.sg-scope).
   Each <section> is a .sg-scope so palette/typography/scale can be themed
   per section by the studio. Type sizes honour --t-scale. Depth via layered
   hairline geometry, slow rotation and vignettes. No external assets.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg, #14130f); color: #e9e3d6; font-family: var(--font-sans); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(200,160,74,.28); }

/* a section is a themable sacred scope */
.y-sec {
  position: relative; isolation: isolate; scroll-margin-top: 64px;
  padding: clamp(72px, 12vh, 160px) clamp(20px, 6vw, 96px);
  background: var(--sg-bg); color: var(--sg-fg);
  --t-scale: 1;
  transition: background .8s var(--ease, cubic-bezier(.16,1,.3,1)), color .8s var(--ease, cubic-bezier(.16,1,.3,1));
}
.y-wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.y-narrow { max-width: 760px; }

/* ---------- type scale (multiplied by --t-scale) ---------- */
.y-display { font-family: var(--font-display); font-weight: 400; line-height: .98; letter-spacing: -.01em;
  font-size: calc(clamp(52px, 10vw, 132px) * var(--t-scale)); }
.y-h1 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -.01em;
  font-size: calc(clamp(38px, 7vw, 84px) * var(--t-scale)); }
.y-h2 { font-family: var(--font-display); font-weight: 500; line-height: 1.05;
  font-size: calc(clamp(30px, 5vw, 55px) * var(--t-scale)); }
.y-h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1;
  font-size: calc(clamp(23px, 3vw, 34px) * var(--t-scale)); }
.y-lead { font-weight: 300; line-height: 1.55;
  font-size: calc(clamp(17px, 2.1vw, 23px) * var(--t-scale)); color: var(--sg-fg); }
.y-body { font-weight: 300; line-height: 1.7; font-size: calc(17px * var(--t-scale)); }
.y-kicker { font-family: var(--font-mono); font-weight: 400; font-size: calc(12px * var(--t-scale));
  letter-spacing: .34em; text-transform: uppercase; color: var(--sg-gold); }
.y-muted { color: color-mix(in srgb, var(--sg-fg) 60%, transparent); }
.em { font-family: var(--font-display); font-style: italic; color: var(--y-accent, var(--sg-gold)); }
h1, h2, h3, p { margin: 0; }

/* ---------- structural rules ---------- */
.y-rule { height: 1px; background: var(--sg-line); border: 0; }
.y-rule-gold { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--sg-gold), transparent); }
.y-stack > * + * { margin-top: var(--s-21); }
.y-phi-l { display: grid; grid-template-columns: 1.618fr 1fr; gap: clamp(34px, 6vw, 89px); align-items: center; }
.y-phi-r { display: grid; grid-template-columns: 1fr 1.618fr; gap: clamp(34px, 6vw, 89px); align-items: center; }
.y-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(21px, 3vw, 55px); }
.y-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(21px, 3vw, 34px); }
@media (max-width: 860px) {
  .y-phi-l, .y-phi-r, .y-cols-2, .y-cols-3 { grid-template-columns: 1fr; gap: var(--s-34); }
}

/* ---------- geometry depth layers ---------- */
.geo-field { position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: var(--field-op, .07); color: var(--sg-fg); overflow: hidden; }
.geo-field.gold { color: var(--sg-gold); }
.geo-field svg { width: 100%; height: 100%; }
.geo-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.geo-center svg { width: min(96vmin, 1100px); height: min(96vmin, 1100px); color: var(--sg-gold); opacity: var(--field-op, .14); }
.geo-rotate { transform-origin: center; animation: geoRot 240s linear infinite; }
.geo-rotate-rev { transform-origin: center; animation: geoRot 320s linear infinite reverse; }
@keyframes geoRot { to { transform: rotate(360deg); } }
.geo-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 42%, color-mix(in srgb, var(--sg-bg) 86%, #000) 100%); }
.geo-draw { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); }
.is-anim .geo-draw.drawn { transition: stroke-dashoffset 4.2s cubic-bezier(.16,1,.3,1); stroke-dashoffset: 0; }
/* scroll-reactive "wind": rotation/scale set per-frame from JS as the section scrolls */
[data-wind] { transform-origin: center; will-change: transform; }

/* vesica plate (stone gradient placeholder — no external assets) */
.y-vesica { clip-path: url(#y-vesica); aspect-ratio: 1 / 1.4; }
.y-plate { background:
    radial-gradient(120% 120% at 30% 18%, color-mix(in srgb, var(--sg-gold) 26%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--sg-fg) 14%, var(--sg-bg)), color-mix(in srgb, var(--sg-fg) 30%, var(--sg-bg))); }
.y-eye { width: 9px; height: 9px; border-radius: 50%; background: var(--sg-gold);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--sg-gold) 16%, transparent); }

/* ---------- buttons ---------- */
.y-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 32px; border: 1px solid var(--sg-gold);
  color: var(--sg-fg); font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; background: transparent; cursor: pointer; position: relative; overflow: hidden;
  transition: color .45s var(--ease, cubic-bezier(.16,1,.3,1)); }
.y-btn::before { content: ""; position: absolute; inset: 0; background: var(--sg-gold); transform: scaleX(0); transform-origin: left; z-index: -1; transition: transform .5s var(--ease, cubic-bezier(.16,1,.3,1)); }
.y-btn:hover { color: var(--sg-bg); } .y-btn:hover::before { transform: scaleX(1); }
.y-btn:focus-visible { outline: 2px solid var(--sg-gold); outline-offset: 3px; }
.y-btn-ghost { border-color: var(--sg-line); color: color-mix(in srgb, var(--sg-fg) 70%, transparent); }
.y-btn-ghost::before { background: color-mix(in srgb, var(--sg-fg) 10%, transparent); }
.y-btn-ghost:hover { color: var(--sg-fg); }

/* ---------- top nav ---------- */
.y-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 6vw, 96px); mix-blend-mode: difference; }
.y-nav .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 22px; letter-spacing: .02em; color: #fff; text-decoration: none; }
.y-nav .brand .seal { width: 26px; height: 26px; color: #fff; }
.y-nav .links { display: flex; gap: 28px; }
.y-nav .links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-decoration: none; opacity: .85; }
.y-nav .links a:hover { opacity: 1; }
@media (max-width: 720px) { .y-nav .links { display: none; } }

/* ---------- footer ---------- */
.y-foot { text-align: center; }
.y-foot .seal { width: 52px; height: 52px; color: var(--sg-gold); margin: 0 auto var(--s-21); }
.y-foot-meta { display: flex; gap: var(--s-34); justify-content: center; flex-wrap: wrap; margin-top: var(--s-21); }
.y-foot-meta a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--sg-fg) 65%, transparent); text-decoration: none; }
.y-foot-meta a:hover { color: var(--sg-gold); }

/* ---------- cards / pillars ---------- */
.y-card { padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); border: 1px solid var(--sg-line); position: relative; background: color-mix(in srgb, var(--sg-fg) 3%, transparent); }
.y-card .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--sg-gold); }
.y-card h3 { margin: var(--s-13) 0 var(--s-8); }

/* palette swatches (estética section) */
.y-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-21); }
.y-swatch { border: 1px solid var(--sg-line); padding: 0; overflow: hidden; text-align: left; background: none; cursor: pointer; color: inherit; font: inherit; }
.y-swatch .band { height: 88px; display: flex; }
.y-swatch .band i { flex: 1; }
.y-swatch .cap { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.y-swatch .cap b { font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.y-swatch .cap span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--sg-fg) 55%, transparent); }
.y-swatch[aria-pressed="true"] { outline: 1px solid var(--sg-gold); outline-offset: -1px; }

/* process steps */
.y-steps { counter-reset: step; }
.y-step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-34); padding: var(--s-34) 0; border-top: 1px solid var(--sg-line); align-items: baseline; }
.y-step .num { font-family: var(--font-mono); color: var(--sg-gold); font-size: clamp(28px, 4vw, 48px); line-height: 1; }

/* ---------- entrance effects (set on [data-effect]; JS adds .is-in) ---------- */
.is-anim [data-reveal] { will-change: transform, opacity, filter; }
/* surgir — fade up */
.is-anim [data-effect="surgir"] [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease, cubic-bezier(.16,1,.3,1)), transform 1s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }
/* veu — veil lifting (fade + gentle rise). Note: avoids clip-path:inset() collapse,
   which could stick clipped/invisible in some engines when transitioning out of a
   fully-collapsed inset — that hid the manifesto + prova sections. */
.is-anim [data-effect="veu"] [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }
/* foco — blur in */
.is-anim [data-effect="foco"] [data-reveal] { opacity: 0; filter: blur(14px); transform: scale(1.01); transition: opacity 1s ease, filter 1.1s var(--ease, cubic-bezier(.16,1,.3,1)), transform 1.1s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }
/* erguer — rise + slight scale */
.is-anim [data-effect="erguer"] [data-reveal] { opacity: 0; transform: translateY(40px) scale(.985); transition: opacity 1s ease, transform 1.1s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }
/* quieto — no motion */
.is-anim [data-effect="quieto"] [data-reveal] { opacity: 1; }
/* revealed state (all effects resolve to identity) */
.is-anim [data-reveal].is-in { opacity: 1 !important; transform: none !important; clip-path: inset(0 0 0 0) !important; filter: none !important; }

/* ===== extra transition effects (additive — everything above is the original) ===== */
/* replay helper: kill transitions for one frame so a replay snaps cleanly to its hidden state, then plays */
.is-anim .no-trans, .is-anim .no-trans * { transition: none !important; }

/* deitar — the geometry lies flat (3D) then rises upright; content rises with it */
.is-anim [data-effect="deitar"] { perspective: 1300px; }
.is-anim [data-effect="deitar"] .geo-center,
.is-anim [data-effect="deitar"] .geo-field { transform: rotateX(84deg); transform-origin: center bottom;
  transition: transform 1.6s var(--ease, cubic-bezier(.16,1,.3,1)); }
.is-anim [data-effect="deitar"].y-in .geo-center,
.is-anim [data-effect="deitar"].y-in .geo-field { transform: none; }
.is-anim [data-effect="deitar"] [data-reveal] { opacity: 0; transform: translateY(46px) scale(.98);
  transition: opacity 1s ease, transform 1.2s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }

/* florescer — the field blooms open from a small centre (petals opening), content scales in */
.is-anim [data-effect="florescer"] .geo-center,
.is-anim [data-effect="florescer"] .geo-field { transform: scale(.32); transform-origin: center;
  transition: transform 1.8s var(--ease, cubic-bezier(.16,1,.3,1)); }
.is-anim [data-effect="florescer"].y-in .geo-center,
.is-anim [data-effect="florescer"].y-in .geo-field { transform: none; }
.is-anim [data-effect="florescer"] [data-reveal] { opacity: 0; transform: scale(.9);
  transition: opacity 1.1s ease, transform 1.3s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }

/* íris — a circle opens outward (circular wipe) revealing each block */
.is-anim [data-effect="iris"] [data-reveal] { opacity: 0; clip-path: circle(0% at 50% 50%);
  transition: opacity .6s ease, clip-path 1.4s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--d, 0s); }
.is-anim [data-effect="iris"] [data-reveal].is-in { clip-path: circle(150% at 50% 50%) !important; }

/* desligado — total stillness: content shown at rest, geometry rotation paused */
.is-anim [data-effect="desligado"] [data-reveal] { opacity: 1; transform: none; }
.is-anim [data-effect="desligado"] .geo-rotate,
.is-anim [data-effect="desligado"] .geo-rotate-rev { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .geo-rotate, .geo-rotate-rev { animation: none; }
  .is-anim [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; }
}