/* General Styles */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #000;
        font-family: "Open Sans", sans-serif;
        color: #fff;
        overflow-x: hidden;
      }


      .page-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
      }

      /* "Some ideas become films..." section — independent from the hero text */
      .ideas-section {
        --ideas-bg: #000;
        --ideas-text: #f5f5f7;
        --ideas-accent: #ff7e5f;   /* same orange as text selection */
        background-color: var(--ideas-bg);
        color: var(--ideas-text);
        padding: 18vh 10vw;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ideas-text {
        font-size: clamp(20px, 2.6vw, 38px);
        line-height: 1.5;
        max-width: 860px;
        text-align: center;
      }
      .ideas-text .ideas-accent,
      .ideas-text .ideas-accent .char {
        color: var(--ideas-accent);
      }

      /* Page 2 Styles */
      .page-2-wrapper {
        min-height: 100vh;
        background-color: #000; /* Fallback background */
      }
      .page-2-container {
        background-color: #fffffff0;
        position: relative;
        width: 90vw;
        margin: 0 auto;
        min-height: 100vh;
        z-index: 1;
      }
      .page-2-background {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        mix-blend-mode: screen;
        pointer-events: none;
        z-index: 3;
      }
      .page-2-background video {
        /* slightly darker so bright frames never wash the letters into the white */
        filter: brightness(0.78) contrast(1.08);
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
      .page-2-section-one {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .intro-letters {
        width: 100%;
        max-width: 75vh;
      }

      .page-2 header {
        border-top: 10px solid #000;
        border-bottom: 10px solid #000;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3rem;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #fff;
      }
      .logo {
        width: 64px;
        height: 64px;
        background-color: #000;
      }
      .page-2 nav {
        display: flex;
        align-items: center;
      }
      .page-2 nav a {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #000;
        border-radius: 50%;
        margin-right: 1.2rem;
        pointer-events: none;
      }
      .page-2 nav a:last-of-type {
        margin-right: 0;
      }

      /* Page 3 Styles */
      .page-3-wrapper {
        height: 200vh; /* Provide scrollable area */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #222;
      }
      #capture {
        position: sticky;
        top: calc(50vh - 200px); /* Center vertically */
        width: 600px;
        height: 400px;
        background-color: #333;
        border: 2px dashed #555;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #888;
      }
      .capture-canvas {
        position: fixed; /* Fixed is needed for this effect to overlay the screen */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        width: 600px; /* Ensure canvas has same dimensions */
        height: 400px;
      }

      /* Page 4 Styles */
      .page-4-wrapper {
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
      }
      .text-block {
        margin: 15vw;
        max-width: 800px;
        font-family: "Space Mono", monospace;
        font-weight: 400;
        font-style: normal;
        font-size: clamp(16px, 4vw, 40px);
        color: #fff;
      }
      /* Style for chars from Splitting.js */
      .char {
        will-change: transform;
        display: inline-block;
      }

      /* Page 5 Styles */
      .page-5-wrapper {
        --light: #eee;
        --dark: #161616;
        height: 100vh;
        background: var(--light);
      }
      .page-5-wrapper .trigger {
        height: 100%;
        position: relative;
      }
      /* Header + subheader shown on each half (revealed/hidden by the stripes) */
      .page-5-wrapper .stripe-label {
        position: absolute;
        top: 42%;   /* top-anchored so both titles line up regardless of subtitle length */
        z-index: 2;
        width: 50%;
        padding: 0 clamp(16px, 4vw, 64px);
        text-align: center;
        color: var(--light);
      }
      .page-5-wrapper .stripe-label.down { left: 0; }
      .page-5-wrapper .stripe-label.up   { right: 0; }
      .page-5-wrapper .stripe-title {
        font-family: "DM Serif Text", serif;
        font-size: clamp(26px, 4.6vw, 68px);
        font-weight: 400;
        line-height: 1.05;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: clamp(10px, 1.4vw, 20px);
      }
      .page-5-wrapper .stripe-sub {
        font-family: "DM Serif Text", serif;
        font-size: clamp(15px, 1.5vw, 22px);
        line-height: 1.4;
        max-width: 24ch;
        margin: 0 auto;
      }

      /* Stripe field. Sized from its own long side (--W) and short side (--H),
         so the stripes keep the same proportions on any screen. */
      .page-5-wrapper .stripes {
        --W: 100vw;
        --H: 100vh;
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--W);
        height: var(--H);
        transform: translate(-50%, -50%);
      }
      .box {
        /* 78 stripes fill the field: spacing H/78, thickness 1.2x spacing (as before) */
        height: calc(var(--H) * 0.0154);
        width: calc(var(--W) / 2);
        margin-bottom: calc(var(--H) * -0.0026);
        background: var(--dark);
        display: block;
      }

      /* Portrait (phones): turn the field 90deg so stripes travel along the long side.
         "Line by line" sits in the top half, "Taking shape" in the bottom half. */
      @media (orientation: portrait) {
        .page-5-wrapper .stripes {
          --W: 100vh;
          --H: 100vw;
          transform: translate(-50%, -50%) rotate(90deg);
        }
        .page-5-wrapper .stripe-label {
          width: 100%;
          left: 0;
          right: 0;
          padding: 0 8vw;
        }
        .page-5-wrapper .stripe-label.down { top: 16%; }
        .page-5-wrapper .stripe-label.up   { top: 64%; }
        .page-5-wrapper .stripe-title { font-size: clamp(30px, 9.5vw, 64px); }
        .page-5-wrapper .stripe-sub { font-size: clamp(16px, 4.4vw, 22px); max-width: 26ch; }
      }

      /* Page 7 Styles */
      .page-7-wrapper {
        --lightness: 65%;
        --base-chroma: 0.3;
        background: #111;
        color: #eee;
        padding: 5rem 0;
      }
      .page-7-wrapper main {
        width: 100%;
      }
      .page-7-wrapper header {
        min-height: 100vh;
        display: flex;
        place-items: center;
        width: 100%;
        padding-inline: 5rem;
      }
      .page-7-wrapper h1,
      .page-7-wrapper h2 {
        --font-level: 8;
        text-wrap: pretty;
        line-height: 0.8;
        margin: 0;
        background: linear-gradient(#eee 60%, #888);
        background-clip: text;
        color: transparent;
      }
      .page-7-wrapper .content {
        display: flex;
        line-height: 1.25;
        width: 100%;
        padding-left: 5rem;
      }
      .page-7-wrapper .content h2 {
        position: sticky;
        top: 50vh;
        transform: translateY(-50%);
        font-size: inherit;
        margin: 0;
        display: inline-block;
        height: fit-content;
        font-weight: 600;
      }
      .page-7-wrapper ul {
        font-weight: 600;
        padding-inline: 0;
        margin: 0;
        list-style-type: none;
      }
      .page-7-wrapper li {
        font-size: 2em; /* Adjust font size for visibility */
        padding: 2rem 0;
      }
      .page-7-wrapper li:not(:last-of-type) {
        color: oklch(
          var(--lightness) var(--base-chroma)
            calc(var(--start, 0) + (var(--step, 1) * var(--i, 0)))
        );
      }
      .page-7-wrapper li:last-of-type {
        background: linear-gradient(#eee 50%, #777);
        background-clip: text;
        color: transparent;
      }

      /* Media Queries */
      @media screen and (max-width: 760px) {
        .page-2-container {
          width: 92vw;
        }
        .intro-letters {
          padding: 0 6vw;
        }
        .page-2 header {
          padding: 0 1rem;
        }
        .logo {
          width: 48px;
          height: 48px;
        }
        .page-2 nav a {
          width: 32px;
          height: 32px;
          margin-right: 0.8rem;
        }
      }
      @media screen and (max-width: 640px) {
        .ideas-section { padding: 14vh 8vw; }
      }


      #header, #footer {
    display: table-row;
    height: .0625rem;
}

 /* from old */



.page-0-wrapper {
    background-color: #F5F5F7;
    padding: 40px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    color: #1D1D1F;
    /* font-size: 8em; */
    line-height: 1.3;
	font-size: clamp(16px, 5.5vw, 120px);
	  white-space: nowrap;
}
	  
.dm-serif-text-regular {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}

button{
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}

.gradient-text {
  /* font-weight: bold; */
    background: linear-gradient(90deg, #1D1D1F 0%, #F5F5F7 97%);
  -webkit-background-clip: text; /* For Chrome, Safari */
  -webkit-text-fill-color: transparent; /* Makes text show gradient */
  background-clip: text; /* For Firefox */
  color: transparent; /* Fallback */
}


.slide-in-text {
  display: inline-block;
  overflow: hidden;
  
}

.slide-in-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: slideIn 0.6s ease forwards;
}



/* Add staggered animation delay for each word */
.slide-in-text span:nth-child(1) { animation-delay: 0s; }
.slide-in-text span:nth-child(2) { animation-delay: 0.2s; }
.slide-in-text span:nth-child(3) { animation-delay: 0.4s; }
.slide-in-text span:nth-child(4) { animation-delay: 0.6s; }
.slide-in-text span:nth-child(5) { animation-delay: 0.8s; }
.slide-in-text span:nth-child(6) { animation-delay: 1.0s; }
.slide-in-text span:nth-child(7) { animation-delay: 1.2s; }
.slide-in-text span:nth-child(8) { animation-delay: 1.4s; }
.slide-in-text span:nth-child(9) { animation-delay: 1.4s; }
.slide-in-text span:nth-child(10) { animation-delay: 1.6s; }
.slide-in-text span:nth-child(11) {  animation: slideIn 2.0s ease forwards; animation-delay: 1.8s;}
.slide-in-text span:nth-child(12) {  animation: slideIn 3.0s ease forwards; animation-delay: 2.2s;}



.slide-in-text span:nth-child(10):hover{
    text-shadow: -1px -1px 0 #f5f5f7, 1px -1px 0 #0033ff, -1px 1px 0 #ff0000, 1px 1px 0 #2bff00;
}

.slide-in-text span:nth-child(4):hover, .slide-in-text span:nth-child(12):hover{
    color: transparent; 
    text-shadow: 0 0 0 #f5f5f7, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}


@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::selection {
  background: #ff7e5f;   /* custom highlight color */
  color: white;          /* text color while selected */
}


.locked-lines {
  /* Prevent any wrap except explicit <br> */
  white-space: nowrap;
  line-height: 1.2;
   font-size: clamp(16px, 2.2vw, 28px);
}



 /* the ripping effect — see .rip block at the end of the file */

/* REEL SECTION */
        /* 2. Main Section Container */
        #new-section {
            background-color: white;
            border-radius: 0.75rem; /* Rounded corners */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Soft shadow */
            padding: 1.5rem; /* Mobile padding */
        }
		
		.reel-section{
		   display: block;
		   white-space: normal;
		   padding: 3rem 1.5rem 4rem;
		}

        /* 3. Grid Container — MOBILE FIRST
           column-secondary uses display:contents so its children (text + button)
           can be ordered around the keyboard: text -> keyboard -> button */
        .section-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }
        .column-secondary { display: contents; }
        .display-text     { order: 1; }
        .column-primary   { order: 2; }
        .dotted-border-btn{ order: 3; }

        /* 4. Keyboard column */
        .column-primary {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            /* keyboard unit: board is ~42 units wide -> fit the viewport, cap at 16px */
            --kb-size: min(16px, calc((100vw - 3rem) / 42));
            /* the board is tilted in 3D, so it needs more vertical room than its layout box */
            padding: calc(var(--kb-size) * 13) 0 calc(var(--kb-size) * 12);
        }

        .primary-text {
            font-size: 2.25rem;
            font-weight: 800;
            color: #1a1a1a;
            opacity: 0.2;
            text-align: center;
        }

        /* 5. Text */
        .display-text {
            font-size: clamp(1.6rem, 7.5vw, 2rem);
            line-height: 1.1;
            color: #1D1D1F;
            text-transform: lowercase;
            text-align: center;
            width: 100%;
        }
        .display-text p { margin-bottom: 1.25rem; }
        .display-text p:last-child { margin-bottom: 0; }

        /* Watch Showcase Button */
        .dotted-border-btn {
            background: none;
            border: 2px dotted #1D1D1F;
            border-radius: 1rem; /* Rounded corners */
            padding: 1rem 2rem; 
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #1D1D1F;
        }
        
        .dotted-border-btn:hover {
            background-color: #1D1D1F;
            color: white;
        }
        .dotted-border-btn:hover .play-icon {
            fill: white;
        }

        .btn-line-1 {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
            letter-spacing: 0.05em; /* tracking-wider */
            display: flex;
            align-items: center;
        }
        .btn-line-2 {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 900; /* font-black */
            text-transform: uppercase;
            letter-spacing: 0.1em; /* tracking-widest */
            line-height: 1;
            margin-top: 0.25rem;
        }
        .play-icon {
            width: 1.5rem;
            height: 1.5rem;
            margin-left: 0.5rem;
            fill: currentColor;
            transition: fill 0.3s ease;
        }


        /* 6. Desktop/Large Screen Styles (1024px and up) */
        @media (min-width: 1024px) {
            .reel-section { padding: 40px; }
            .section-grid {
                display: grid;
                grid-template-columns: 2fr 1fr;
                align-items: center;
                gap: 4rem;
            }
            .column-primary   { order: 1; }
            .column-secondary {
                order: 2;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .column-primary {
                min-height: 400px;
                padding: 0;
                --kb-size: min(16px, calc((66vw - 120px) / 42));
            }
            .display-text {
                font-size: 2rem;
                text-align: left;
                margin-bottom: 2rem;
            }
            .display-text p { margin-bottom: 3rem; }
            .display-text p:last-child { margin-bottom: 2rem; }
            .dotted-border-btn {
                align-items: flex-start;
                text-align: left;
                margin-top: 1rem;
            }
        }

        /* --- Showcase video lightbox --- */
        .showcase-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(10, 10, 12, 0.92);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s ease, visibility 0s linear 0.35s;
        }
        .showcase-modal.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.35s ease;
        }
        .showcase-frame {
            position: relative;
            width: min(100%, 1280px, calc((100vh - 6rem) * 16 / 9));
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 2rem 4rem rgba(0,0,0,0.5);
            transform: scale(0.94);
            transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
        }
        .showcase-modal.is-open .showcase-frame { transform: scale(1); }
        .showcase-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .showcase-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 2px dotted #f5f5f7;
            background: transparent;
            color: #f5f5f7;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .showcase-close:hover { background: #f5f5f7; color: #1D1D1F; }
        body.modal-open { overflow: hidden; }


/* ===== IN POST section ("website in development" + reel) ===== */
.in-post {
  --ip-bg: #0b0b0c;
  --ip-text: #f5f5f7;
  --ip-muted: #8a8a8e;
  --ip-accent: #ff7e5f;
  background: var(--ip-bg);
  color: var(--ip-text);
  padding: clamp(80px, 14vh, 160px) clamp(16px, 6vw, 96px);
}
.in-post-head {
  max-width: 900px;
  margin: 0 auto clamp(56px, 9vh, 110px);
  text-align: center;
}
.in-post-eyebrow {
  font-family: "Space Mono", monospace;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.12em;
  color: var(--ip-muted);
  margin-bottom: 1.5rem;
}
.in-post-eyebrow span { color: var(--ip-accent); }
.in-post-title {
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;
  margin-bottom: clamp(36px, 6vh, 64px);
}
.in-post-title em { font-style: italic; color: var(--ip-accent); }

/* render bar */
.render {
  max-width: 520px;
  margin: 0 auto;
  font-family: "Space Mono", monospace;
  font-size: clamp(12px, 1.1vw, 14px);
  text-align: left;
}
.render-meta {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ip-muted);
  margin-bottom: 0.6rem;
}
.render-pct { color: var(--ip-text); }
.render.stalled .render-pct { color: var(--ip-accent); animation: ip-blink 1s steps(1) infinite; }
.render-track {
  height: 6px;
  background: #222225;
  border-radius: 3px;
  overflow: hidden;
}
.render-fill {
  width: 0;
  height: 100%;
  background: var(--ip-accent);
  border-radius: 3px;
}
.render-excuse {
  margin-top: 1rem;
  color: var(--ip-muted);
  min-height: 2.8em;
}
.excuse-text { color: var(--ip-text); transition: opacity .3s ease; }
.excuse-text.out { opacity: 0; }
@keyframes ip-blink { 50% { opacity: 0; } }

/* dailies grid */
.in-post-dailies { max-width: 1280px; margin: 0 auto; }
.dailies-label {
  font-family: "Space Mono", monospace;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ip-muted);
  margin-bottom: 1rem;
}
.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
}
.reel-clip {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #151517;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 90ms);
}
.in-post.is-visible .reel-clip { opacity: 1; transform: none; }
.reel-clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter: saturate(.9);
}
.reel-clip:hover video { transform: scale(1.04); filter: saturate(1.1); }
.reel-clip figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(6px, 1vw, 12px) clamp(8px, 1.2vw, 14px);
  font-family: "Space Mono", monospace;
  font-size: clamp(9px, 0.9vw, 12px);
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  pointer-events: none;
}
.clip-take { display: inline-flex; align-items: center; gap: 0.5em; }
.rec-dot {
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: var(--ip-accent);
  animation: ip-blink 1.4s steps(1) infinite;
}
.clip-tc { opacity: .85; }

/* closing line */
.in-post-cta {
  text-align: center;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.35;
  margin-top: clamp(56px, 9vh, 110px);
}
.in-post-cta a {
  color: var(--ip-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity .2s ease;
}
.in-post-cta a:hover { opacity: .7; }

@media (max-width: 760px) {
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .reel-clip { opacity: 1; transform: none; transition: none; }
  .rec-dot, .render.stalled .render-pct { animation: none; }
}


/* ===== Liquid text morph (section with background video) ===== */
.morph-text {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  font-size: min(10.5vw, 16vh, 168px);
  line-height: 1.25;
  color: #000;             /* black = where the video shows through */
  white-space: nowrap;
  padding: 0.35em 0.6em;
  filter: url(#morph-threshold);
}
.morph-word { grid-area: 1 / 1; }
.morph-char { display: inline-block; will-change: filter, opacity; }
.morph-b .morph-char { opacity: 0; }
.morph-line {
  grid-area: 1 / 1;
  align-self: end;
  height: max(3px, 0.045em);
  margin-bottom: 0.2em;     /* sits on the baseline; descenders cross it */
  background: #000;
}
.morph-defs { position: absolute; }

.morph-word { text-align: center; }
@media (max-width: 640px) {
  /* two lines on phones so the type can be much bigger */
  .morph-text { font-size: min(19vw, 15vh); line-height: 1.05; padding: 0.3em 0.3em; }
  .morph-space { display: block; height: 0; overflow: hidden; }
  .page-2-background video { filter: brightness(0.62) contrast(1.12); }
}

/* ===== "Creative production partner" — paper tear ===== */
.page-01-wrapper {
  background-color: #F5F5F7;
}
.rip {
  --paper: #F5F5F7;
  --under: #1D1D1F;
  position: relative;
  width: 100%;
  height: clamp(320px, 42vh, 440px);
  overflow: hidden;
  background: var(--paper);
}
.rip-under {
  position: absolute;
  inset: 12% 0;   /* only behind the tear zone -> no dark sliver at the section edges */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--under);
}
.rip-desc {
  color: #f5f5f7;
  text-align: center;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.45;
  max-width: 86ch;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease .15s, transform .4s ease .15s;
}
.rip.is-open .rip-desc { opacity: 1; transform: none; }

.rip-paper {
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.rip-top { z-index: 2; }
.rip-bottom { z-index: 2; }
.rip-content {
  position: absolute;
  inset: 0;
}
.rip-headline {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #1D1D1F;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.1;
  padding: 0 16px;
}
.rip-logo {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 4.6rem);
  transform: translateX(-50%);
  width: clamp(150px, 15vw, 220px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.rip-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.rip-fiber {
  fill: #ffffff;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.25));
}

/* trigger band across the headline */
.rip-hit {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 34%;
  transform: translateY(-50%);
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.rip-hit:focus-visible { outline: 2px dotted #1D1D1F; outline-offset: -6px; }

@media (max-width: 640px) {
  .rip { height: 400px; }
  .rip-logo { bottom: calc(50% + 5.2rem); width: 150px; }
  .rip-desc { font-size: 16px; max-width: 40ch; }
}

/* Hide sub-pixel seams between light sections (the black page background
   can show through as a hairline on scaled screens, e.g. 125% / phones) */
.page-01-wrapper,
.reel-section {
  box-shadow: 0 -2px 0 #F5F5F7;
}


/* ===== Scroll cue (morph section): small down arrow near the bottom, appears only after a pause ===== */
.page-2-wrapper { position: relative; }
.scroll-cue {
  position: absolute;
  left: 50%;
  top: calc(100vh - 4.25rem);
  top: calc(100svh - 4.25rem);
  z-index: 5;
  width: 28px; height: 28px;
  margin-left: -14px;
  color: #1D1D1F;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.scroll-cue.is-on { opacity: 0.6; }
.scroll-cue svg {
  display: block;
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  animation: cueBob 2.4s ease-in-out infinite;
}
@keyframes cueBob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }