/* POLYRA corrective layer — discrete scroll storytelling + collision-proof
   hero layout. Loaded after resin.css so the base art direction stays intact. */

.resin-concept-page .resin-hero-copy > .resin-hero-phases {
  display: block;
  align-items: initial;
  gap: 0;
}

.resin-concept-page .resin-hero-copy > .resin-hero-actions {
  display: flex;
  align-items: center;
}

.resin-concept-page .resin-scroll {
  display: none !important;
}

.resin-concept-page .resin-hero-copy {
  transition: opacity .48s cubic-bezier(.22,.61,.36,1), filter .48s cubic-bezier(.22,.61,.36,1);
}

.resin-concept-page .resin-phase {
  transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
}

/* The new interaction is not a 500svh continuous scrub anymore. The browser
   stays on one viewport while three distinct wheel/swipe gestures play three
   video chapters. After chapter 3, the next gesture naturally leaves hero. */
@media (prefers-reduced-motion: no-preference) {
  .resin-concept-page .resin-hero {
    height: 100svh;
    min-height: 100svh;
    overscroll-behavior: contain;
  }

  .resin-concept-page .resin-hero-stage {
    position: relative;
    top: auto;
    height: 100svh;
    min-height: 520px;
  }

  .resin-concept-page .resin-hero[data-polyra-state="intro"] .resin-hero-copy,
  .resin-concept-page .resin-hero[data-polyra-state="moving"] .resin-hero-copy {
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
  }

  .resin-concept-page .resin-hero[data-polyra-state="rest"] .resin-hero-copy {
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }
}

/* Initial centered cue. It is deliberately separate from .resin-hero-copy so
   the first frame contains no headline, kicker, paragraph or CTA. */
.resin-concept-page .polyra-scroll-intro {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}

.resin-concept-page .resin-hero[data-polyra-state="intro"] .polyra-scroll-intro {
  opacity: 1;
  transform: none;
}

.resin-concept-page .polyra-scroll-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  margin-top: 4svh;
}

.resin-concept-page .polyra-scroll-intro__inner > span {
  color: #f4e9df;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 4px 24px #000b;
  animation: polyra-scroll-label 1.75s ease-in-out infinite;
}

.resin-concept-page .polyra-scroll-intro__line {
  position: relative;
  display: block;
  width: 1px;
  height: 86px;
  overflow: hidden;
  background: linear-gradient(180deg, #f2b48000, #f2b480a8 22%, #f2b48038 76%, #f2b48000);
  box-shadow: 0 0 18px #df824554;
}

.resin-concept-page .polyra-scroll-intro__line::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -1px;
  width: 3px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #ffd7b5, transparent);
  box-shadow: 0 0 14px #f1a66d;
  animation: polyra-scroll-line 1.55s cubic-bezier(.45,0,.25,1) infinite;
}

@keyframes polyra-scroll-label {
  0%,100% { opacity: .58; }
  50% { opacity: 1; }
}

@keyframes polyra-scroll-line {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(110px); opacity: 0; }
}

/* Desktop copy: reserve the CTA row independently from the largest 3-line
   headline. This is the layout fix for the user's fullscreen screenshots. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .resin-concept-page .resin-hero-copy {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: clamp(30px, 4.8svh, 54px);
    width: min(1280px, calc(100% - 56px));
    padding: 0;
    transform: translateX(-50%);
  }

  .resin-concept-page .resin-hero-copy > p:first-child {
    margin: 0;
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-phases {
    min-height: clamp(330px, 42svh, 400px);
    margin-top: clamp(14px, 1.8svh, 22px);
  }

  .resin-concept-page .resin-hero-copy h1 {
    max-width: 940px;
    margin: 0 0 clamp(14px, 1.8svh, 20px);
    font-size: clamp(3.8rem, min(7vw, 11.2svh), 7.1rem);
    line-height: .83;
  }

  .resin-concept-page .resin-lead {
    max-width: 590px;
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.42;
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-actions {
    gap: 24px;
    margin-top: clamp(15px, 2svh, 22px);
  }
}

@media (min-width: 901px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
  .resin-concept-page .resin-hero-copy {
    bottom: 24px;
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-phases {
    min-height: 330px;
    margin-top: 12px;
  }

  .resin-concept-page .resin-hero-copy h1 {
    margin-bottom: 12px;
    font-size: clamp(3.55rem, min(6.4vw, 11svh), 6.1rem);
    line-height: .82;
  }

  .resin-concept-page .resin-lead {
    max-width: 560px;
    font-size: 1.02rem;
    line-height: 1.35;
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-actions {
    margin-top: 14px;
  }

  .resin-concept-page .resin-button {
    min-height: 52px;
  }
}

/* Mobile keeps the exact same one-gesture/one-chapter contract. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .resin-concept-page .resin-hero-stage {
    min-height: 100svh;
  }

  .resin-concept-page .resin-hero-copy {
    width: 100%;
    padding: 0 0 max(62px, 7svh);
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-phases {
    position: relative;
    min-height: clamp(250px, 32svh, 320px);
    margin-top: 18px;
  }

  .resin-concept-page .resin-phase {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }

  .resin-concept-page .resin-phase[data-live] {
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-actions {
    margin-top: 18px;
    gap: 14px;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .resin-concept-page .resin-hero-copy {
    padding-bottom: max(54px, 6svh);
  }

  .resin-concept-page .resin-hero-copy > .resin-hero-phases {
    min-height: clamp(238px, 30svh, 288px);
    margin-top: 14px;
  }

  .resin-concept-page .resin-hero-copy h1 {
    margin-top: 0;
    font-size: clamp(3rem, 13vw, 5rem);
    line-height: .87;
  }

  .resin-concept-page .resin-lead {
    font-size: .96rem;
    line-height: 1.42;
  }

  .resin-concept-page .polyra-scroll-intro__line {
    height: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resin-concept-page .polyra-scroll-intro {
    display: none;
  }
}