/* ==========================================================================
   KATARI JYOTHSNA - inner.css
   --------------------------------------------------------------------------
   Every page except home. Brings them into the home page's language:
   a dark cinematic photo hero, full-width display type, and a dark closing
   stage. Motion comes from assets/js/inner3d.js.
   Load after responsive.css and stage.css.
   ========================================================================== */

/* ==========================================================================
   1. PHOTO HERO
   ========================================================================== */
.has-stage-hero .page-hero {
  /* slide under the sticky header so the header floats on the photograph */
  margin-top: calc(var(--header-h) * -1);
  min-height: min(88svh, 58rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + clamp(4rem, 10vh, 7rem));
  padding-bottom: 0;
}
.page-hero .mesh { display: none; }

.page-hero__img {
  position: absolute;
  z-index: -2;
  left: 0; top: -8%;
  width: 100%; height: 116%;
  max-width: none;
  object-fit: cover;
  object-position: center 45%;
  will-change: transform;
}
/* legibility wash: dark from the bottom-left, a hint of magenta from the top */
.has-stage-hero .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(18,4,15,.96) 0%, rgba(18,4,15,.72) 34%, rgba(18,4,15,.35) 70%, rgba(18,4,15,.55) 100%),
    linear-gradient(100deg, rgba(18,4,15,.75) 0%, rgba(18,4,15,.2) 60%, rgba(18,4,15,0) 100%),
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(225,29,110,.28), transparent 70%);
}

/* the old narrow 30ch column is what crushed every headline to 324px */
.page-hero__inner,
.page-hero__inner--wide { max-width: none; gap: 1.1rem; }

.page-hero h1 {
  font-size: clamp(3rem, 7.2vw, 7.4rem);
  line-height: .98;
  letter-spacing: -0.035em;
  max-width: 15ch;
  color: #FFFFFF;
  /* animations.js sets overflow:hidden inline when it splits words; with a
     wide heading that mask is unnecessary and it clips descenders */
  overflow: visible !important;
  text-wrap: balance;
}
.page-hero .lede {
  max-width: 50ch;
  font-size: var(--step-1);
  color: rgba(255,248,244,.82);
}
.page-hero .breadcrumb {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: rgba(255,248,244,.6);
  margin-bottom: .25rem;
}
.page-hero .breadcrumb a:hover { color: #FFFFFF; }
.page-hero .breadcrumb [aria-current] { color: var(--brand-marigold); }

/* bottom strip: page index, studio, scroll cue */
.page-hero__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255,248,244,.16);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,248,244,.6);
}
.page-hero__strip b { color: var(--brand-marigold); font-weight: 500; }
.page-hero__scroll { display: inline-flex; align-items: center; gap: .7rem; }
.page-hero__scroll::after {
  content: "";
  width: 2.5rem; height: 1px;
  background: var(--grad);
  transform-origin: left;
  animation: strip-pulse 2.2s var(--ease-in-out) infinite;
}
@keyframes strip-pulse { 0%,100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }

/* ==========================================================================
   2. CONTENT - a little more presence, in step with the home page
   ========================================================================== */
.has-stage-hero main > .section:first-of-type,
.has-stage-hero .page-hero + .section { padding-top: clamp(4.5rem, 9vw, 8rem); }

.has-stage-hero .section-head h2,
.has-stage-hero .uhead h2,
.has-stage-hero main h2.display { font-size: clamp(2.3rem, 4.8vw, 4.3rem); line-height: 1.02; }

/* photographs that open on scroll need their own rounded frame */
.has-stage-hero .plate__frame,
.has-stage-hero .split__media .ratio,
.has-stage-hero .case-hero { border-radius: var(--r-xl); overflow: hidden; }

/* cards lift into 3D on hover, the way the home coverflow cards sit */
@media (hover: hover) {
  .has-stage-hero :is(.card, .feature, .pkg, .testimonial, .ucard, .step):hover {
    transform: perspective(1000px) translateY(-6px) rotateX(3deg);
    box-shadow: 0 30px 60px -30px rgba(41,8,31,.35);
  }
}

/* ==========================================================================
   3. CLOSING BAND - a dark stage like the home finale
   ========================================================================== */
.has-stage-hero .cta-band {
  border-radius: 36px;
  padding-block: clamp(4rem, 10vw, 8rem);
  transform-origin: 50% 100%;
}
.has-stage-hero .cta-band h2 { font-size: clamp(2.6rem, 6.4vw, 5.8rem); line-height: .98; }

/* ==========================================================================
   4. 404 on the stage
   ========================================================================== */
.nf.stage { min-height: 86svh; margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h); }
.nf.stage h1 { color: #FFFFFF; }
.nf.stage .lede { color: rgba(255,248,244,.8); }

/* ==========================================================================
   5. SMALL SCREENS
   ========================================================================== */
@media (max-width: 899px) {
  .has-stage-hero .page-hero { min-height: 76svh; padding-top: calc(var(--header-h) + 4rem); }
  .page-hero h1 { font-size: clamp(2.5rem, 11vw, 3.7rem); max-width: none; }
  .page-hero .lede { font-size: 1rem; }
  .page-hero__strip { margin-top: 2rem; font-size: .58rem; letter-spacing: .14em; }
  .page-hero__strip span:nth-child(2) { display: none; }
  .has-stage-hero .cta-band { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__scroll::after { animation: none; }
}