/* ==========================================================================
   New Concept Bar — showcase.css
   Apple-style motion: reveal system, hero, manifesto, pinned scrollytelling.
   ========================================================================== */

/* --- Reveal system (only active when JS is present) ----------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(38px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="scale"] { transform: scale(.92); }
.js [data-reveal="left"]  { transform: translateX(-48px); }
.js [data-reveal="right"] { transform: translateX(48px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* Word / line reveal for headlines */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .012em .12em; margin: 0 -.012em; }
.w__i { display: inline-block; transform: translateY(112%); transition: transform 1.05s var(--ease); transition-delay: var(--wd, 0ms); will-change: transform; }
[data-split].is-visible .w__i { transform: none; }

/* ==========================================================================
   HERO (lead)
   ========================================================================== */
.ncb-lead {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(7rem, 14vh, 11rem) var(--gutter) clamp(2rem, 6vh, 4rem); overflow: hidden;
}
.ncb-lead__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ncb-lead__bgmedia { position: absolute; inset: -14% 0; will-change: transform; }
.ncb-lead__bgmedia video, .ncb-lead__bgmedia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .7; background: #07070a; }
.ncb-lead__bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(62% 40% at 50% 54%, rgba(9,9,12,.55) 0%, transparent 74%),
  radial-gradient(120% 92% at 50% 38%, rgba(9,9,12,.24) 0%, rgba(9,9,12,.62) 58%, rgba(9,9,12,.9) 100%),
  linear-gradient(180deg, rgba(9,9,12,.55) 0%, rgba(9,9,12,.16) 42%, rgba(9,9,12,.7) 100%); }
.ncb-lead__aura { position: absolute; width: 72vw; height: 72vw; top: -28%; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(201,150,47,.24), transparent 60%); filter: blur(60px); }
.ncb-lead__inner { position: relative; z-index: 2; max-width: min(92vw, 900px); }
.ncb-lead__eyebrow {
  display: inline-block; margin-bottom: clamp(1.2rem, 3vh, 2rem);
  font-size: .8rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--ncb-gold);
}
.ncb-lead__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.8rem, 1rem + 7vw, 7rem); line-height: .98; letter-spacing: -.015em;
  text-wrap: balance; color: var(--ncb-text);
}
.ncb-lead__title .gold-text:not(.w) { display: inline; }
.ncb-lead__sub {
  max-width: 30ch; margin: clamp(1.4rem, 3vh, 2.2rem) auto 0;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.6; color: var(--ncb-text);
  text-shadow: 0 1px 24px rgba(0,0,0,.7);
}
.ncb-lead__cta { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; justify-content: center; margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.ncb-textlink {
  display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600;
  color: var(--ncb-gold-3);
}
.ncb-textlink .ncb-icon { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.ncb-textlink:hover { color: var(--ncb-gold); }
.ncb-textlink:hover .ncb-icon { transform: translateX(4px); }
.ncb-textlink--muted { color: var(--ncb-muted); }
.ncb-textlink--muted:hover { color: var(--ncb-text); }

.ncb-lead__scroll { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 3; display: grid; place-items: center; gap: .5rem; color: var(--ncb-muted); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.ncb-lead__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--ncb-gold-2), transparent); position: relative; overflow: hidden; }
.ncb-lead__scroll-line::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: var(--ncb-gold-3); animation: ncb-scrolldot 2.2s var(--ease) infinite; }
@keyframes ncb-scrolldot { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
@media (prefers-reduced-motion: reduce) { .ncb-lead__scroll-line::after { animation: none; } }

/* ==========================================================================
   MANIFESTO — big-type statement
   ========================================================================== */
.ncb-manifesto { padding-block: clamp(7rem, 20vh, 15rem); }
.ncb-manifesto__inner { max-width: min(92vw, 1040px); margin-inline: auto; text-align: center; }
.ncb-manifesto__eyebrow { display: block; margin-bottom: clamp(1.5rem, 4vh, 2.6rem); font-size: .78rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ncb-gold); }
.ncb-manifesto__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, .9rem + 5.2vw, 5.4rem); line-height: 1.04; letter-spacing: -.01em; color: var(--ncb-text);
}
.ncb-manifesto__text .line { display: block; }
.ncb-manifesto__text .dim { color: var(--ncb-dim); }
/* :not(.w) — theme.js copies the class onto the word wrapper, and display:inline
   would kill its overflow:hidden mask, leaving the reveal text visible offset. */
.ncb-manifesto__text .gold-text:not(.w) { display: inline; }
/* Stagger the second line after the first for a line-by-line cascade. */
.ncb-manifesto__text .line:nth-child(2) .w__i { transition-delay: calc(var(--wd, 0ms) + 300ms); }

/* ==========================================================================
   SCROLLYTELLING SHOWCASE (pinned)
   ========================================================================== */
.ncb-show { position: relative; min-height: calc((var(--chapters, 4)) * 100vh); background: linear-gradient(180deg, transparent, #060608 12%, #060608 88%, transparent); }
.ncb-show__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ncb-show__head { position: absolute; z-index: 4; top: clamp(5.5rem, 12vh, 8rem); left: 50%; transform: translateX(-50%); text-align: center; width: 100%; }
.ncb-show__head-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ncb-gold); }
@media (max-width: 899px) { .ncb-show__head { display: none; } }

.ncb-show__chapter {
  position: absolute; inset: 0; display: grid; align-items: center;
  grid-template-columns: 1fr; padding: 0 var(--gutter);
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s;
}
.ncb-show__chapter.is-active { opacity: 1; visibility: visible; }

/* Sin JS — o cuando el failsafe de header.php retira la clase `js` — nadie puede
   avanzar los capítulos: la sección quedaría como 400vh de scroll muerto con un
   solo fotograma visible. Se desmonta el pin y los cuatro capítulos pasan a ser
   bloques apilados normales. Aditivo: no toca nada en la ruta con JS. */
html:not(.js) .ncb-show { min-height: 0; }
html:not(.js) .ncb-show__sticky { position: static; height: auto; overflow: visible; }
html:not(.js) .ncb-show__head { position: static; transform: none; width: auto; margin-bottom: 2rem; }
html:not(.js) .ncb-show__chapter {
  position: static; opacity: 1; visibility: visible;
  padding: clamp(2.5rem, 7vh, 5rem) var(--gutter);
}
html:not(.js) .ncb-show__dots { display: none; } /* indicador de un carrusel que ya no existe */

.ncb-show__media { position: relative; justify-self: center; width: min(84vw, 440px); aspect-ratio: 4 / 5; }
.ncb-show__media::before { content: ""; position: absolute; inset: -12% -8%; background: radial-gradient(circle, color-mix(in srgb, var(--chapter-glow, #c9962f) 30%, transparent), transparent 66%); filter: blur(30px); z-index: 0; }
.ncb-show__media picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ncb-line); box-shadow: var(--shadow); }
.ncb-show__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.ncb-show__chapter.is-active .ncb-show__media img { transform: scale(1); }

/* Cutout variant: a transparent product PNG shown bare (no frame/background),
   gently tilted to the right. Keeps the image's own aspect ratio (capped by
   height) so it works for portrait (Dreamy) or landscape (Foamers) alike. */
.ncb-show__media--cutout { aspect-ratio: auto; display: grid; place-items: center; }
.ncb-show__media--cutout::before { inset: -12% -14%; filter: blur(48px); opacity: .78; }
.ncb-show__media--cutout picture { display: contents; }
.ncb-show__media--cutout img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%; max-height: 52vh;
  object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  transform: rotate(7deg) scale(1.03);
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.5));
}
.ncb-show__chapter.is-active .ncb-show__media--cutout img { transform: rotate(7deg) scale(1); }
@media (min-width: 900px) { .ncb-show__media--cutout img { max-height: 70vh; } }
@media (prefers-reduced-motion: reduce) { .ncb-show__media--cutout img { transform: rotate(7deg); } }

.ncb-show__text { text-align: center; margin-top: 2rem; }
.ncb-show__index { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .24em; color: var(--ncb-gold); margin-bottom: .8rem; }
.ncb-show__name { font-family: var(--font-display); font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); line-height: .98; letter-spacing: -.01em; color: var(--ncb-text); }
.ncb-show__line { max-width: 26ch; margin: 1rem auto 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--ncb-muted); line-height: 1.55; }
.ncb-show__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem; font-weight: 600; color: var(--ncb-gold-3); }
.ncb-show__link .ncb-icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.ncb-show__link:hover .ncb-icon { transform: translate(3px,-3px); }

.ncb-show__dots { position: absolute; z-index: 4; bottom: clamp(2rem, 6vh, 4rem); left: 50%; transform: translateX(-50%); display: flex; gap: .7rem; }
.ncb-show__dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ncb-gold-2) 30%, transparent); border: 1px solid color-mix(in srgb, var(--ncb-gold-2) 45%, transparent); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), width var(--dur) var(--ease); }
.ncb-show__dot.is-active { background: var(--ncb-gold-grad); width: 26px; border-radius: 5px; border-color: transparent; }

@media (min-width: 900px) {
  .ncb-show__chapter { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); padding: 0 clamp(3rem, 7vw, 8rem); align-items: center; }
  .ncb-show__text { text-align: left; margin-top: 0; }
  .ncb-show__line { margin-left: 0; }
  .ncb-show__media { justify-self: end; width: min(40vw, 480px); }
  .ncb-show__chapter[data-flip="1"] .ncb-show__media { order: -1; justify-self: start; }
  .ncb-show__chapter[data-flip="1"] .ncb-show__text { text-align: right; }
  .ncb-show__chapter[data-flip="1"] .ncb-show__line { margin-left: auto; margin-right: 0; }
}