/* =====================================================================
   YOLANI OLIVAS: v3 ELEVATION LAYER
   Additive. Loads AFTER style.css + motion.css. Introduces the live
   prototype video demos ("prototyped in code, not Figma"), a kinetic
   marquee, and richer section motion. Inherits base tokens + --ease.
   Everything degrades to a static, readable state without JS.
   ===================================================================== */

/* ---------------------------------------------------------------------
   KINETIC MARQUEE  (senior-restrained: slow, single line, hairline ruled)
   --------------------------------------------------------------------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 1.15rem; background: var(--paper); }
.marquee__track { display: flex; gap: 3.5rem; width: max-content; will-change: transform; animation: marq 38s linear infinite; }
.marquee__track span {
  font-family: var(--serif); font-style: italic; font-size: var(--step-1);
  color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 3.5rem;
}
.marquee__track span::after { content: "✦"; font-style: normal; font-size: .7em; color: var(--ink-faint); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---------------------------------------------------------------------
   CODE BAND: the live prototype demos
   --------------------------------------------------------------------- */
.codeband { background: var(--paper-2); border-block: 1px solid var(--line); }
.codeband__head { max-width: 60ch; }
.codeband__head h2 { margin-top: .5rem; text-wrap: balance; }
.codeband__head h2 em { font-style: italic; font-weight: 500; }
.codeband__head p { margin-top: 1.1rem; color: var(--ink-soft); text-wrap: pretty; max-width: 54ch; }

.codeband__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 780px) { .codeband__grid { grid-template-columns: 1fr; gap: 3rem; } }

.demo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.demo__screen {
  position: relative; width: 100%; max-width: 320px; margin-inline: auto;
  aspect-ratio: 410 / 832; border-radius: 13.66% / 6.73%; overflow: hidden;
  background: #111;
  transition: transform .55s var(--ease);
}
.demo__screen video { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.demo__badge {
  align-self: center; margin-bottom: 1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--ink) 88%, transparent); color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 6px 11px; border-radius: 99px;
}
.demo__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d058; box-shadow: 0 0 0 0 rgba(52,208,88,.7); animation: livePulse 2.4s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(52,208,88,.6);} 70%,100% { box-shadow: 0 0 0 8px rgba(52,208,88,0);} }
@media (prefers-reduced-motion: reduce){ .demo__badge::before { animation: none; } }

@media (hover:hover) and (pointer:fine) {
  .demo:hover .demo__screen { transform: translateY(-8px); }
}
.demo__meta { margin-top: 1.25rem; max-width: 34ch; }
.demo__meta .eyebrow { display: block; }
.demo__meta h3 { font-size: var(--step-1); margin-top: .35rem; line-height: 1.15; text-wrap: balance; }
.demo__meta p { font-size: var(--step--1); color: var(--ink-soft); margin: .6rem auto 0; max-width: 32ch; text-wrap: pretty; }
.demo__links { margin-top: 1.1rem; display: inline-flex; gap: 1.4rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.demo__links a { font-size: var(--step--1); position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.demo__play { font-weight: 600; }
.demo__play .dot { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: inline-block; }
.demo__links a .arw { transition: transform .3s var(--ease); }
.demo__links a:hover .arw { transform: translateX(4px); }
.demo__links a::after { content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:currentColor; transition:width .35s var(--ease); }
.demo__links a:hover::after { width:100%; }

/* ---------------------------------------------------------------------
   CASE-PAGE PROTOTYPE BLOCK: full-width "play the real thing"
   --------------------------------------------------------------------- */
.caseproto { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 820px){ .caseproto { grid-template-columns: 1fr; } }
.caseproto__screen {
  position: relative; width: 100%; max-width: 330px; margin-inline: auto;
  aspect-ratio: 470/900; border-radius: 32px; overflow: hidden; background:#E8E8EA;
  box-shadow: 0 40px 80px -36px rgba(23,21,15,.55);
}
.caseproto__screen video { width:100%; height:100%; object-fit:cover; display:block; }
.caseproto__copy h2 em { font-style: italic; font-weight: 500; }
.caseproto__copy p { margin-top: 1rem; color: var(--ink-soft); }
.caseproto__cta { margin-top: 1.6rem; display:inline-flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   REVEAL SAFETY: belt-and-suspenders so a section can NEVER stay blank.
   The base rule already lives in style.css (html.js [data-reveal]{opacity:0}).
   v3.js adds .in on scroll-approach and hard-reveals everything on a timer;
   this class is the CSS side of that guarantee.
   --------------------------------------------------------------------- */
html.reveal-all [data-reveal],
html.reveal-all [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------------
   v3 FEEDBACK TWEAKS
   --------------------------------------------------------------------- */
/* marquee: lift it up, give "The record" eyebrow room to breathe */
.marquee { margin-block: clamp(1rem, 3vw, 2rem) clamp(3.5rem, 8vw, 6.5rem); }

/* hero: nudge the interactive phone a touch to the right for balance */
@media (min-width: 961px) { .hero__col--art .plm { transform: translateX(22px); } }

/* about hero: collapse the tall full-viewport gap (no art column here) */
.hero--about { min-height: auto; justify-content: flex-start; padding-bottom: clamp(2rem, 5vw, 3.5rem); }