/* STEELCO GUJARAT — cinematic landing hero.
   Shared source of truth for the Sustainability and Equipment landings.
   Consumers: index.html (#sustain) and equipment.html. */
/* ===== SUSTAINABILITY LANDING — minimal cinematic (v5) ===== */

.sl-stage{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}
.sl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.06)}
.sl-stage.is-visible .sl-bg{transform:scale(1);transition:transform 2.4s cubic-bezier(.2,.6,.2,1)}
.sl-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(15,14,12,.42) 0%,rgba(15,14,12,.18) 30%,rgba(15,14,12,.28) 62%,rgba(15,14,12,.66) 100%)}
.sl-in{position:relative;z-index:2;text-align:center;color:#fff;padding:0 26px;max-width:900px}
.sl-eyebrow{display:inline-block;font:600 11px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:#fff;opacity:.92;padding-bottom:12px;position:relative}
.sl-eyebrow::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:2px;background:var(--scale)}
.sl-h{font:800 clamp(44px,7vw,100px)/1.02 var(--disp);letter-spacing:-.04em;margin:26px 0 20px;text-shadow:0 2px 40px rgba(15,14,12,.35)}
.sl-p{font:500 clamp(14px,1.6vw,17px)/1.7 var(--disp);color:rgba(255,255,255,.88);max-width:46ch;margin:0 auto}/* entrance — homepage timing tokens */@media(prefers-reduced-motion:reduce){
  .sl-bg,.sl-stage.is-visible .sl-bg{transform:none;transition:none}}
@media(max-width:600px){.sl-in{padding:0 20px}}
/* CTA — hairline glass capsule with orange sweep fill */
.sl-cta{position:relative;display:inline-flex;align-items:center;gap:14px;margin-top:42px;padding:17px 26px 17px 30px;border-radius:999px;overflow:hidden;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);transition:transform .45s cubic-bezier(.2,.6,.2,1),border-color .45s,box-shadow .45s}
.sl-cta-fill{position:absolute;inset:-1px;z-index:0;border-radius:inherit;background:linear-gradient(120deg,var(--scale),var(--scale2));transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.sl-cta-t{position:relative;z-index:1;font:700 clamp(13px,1.35vw,15.5px) var(--disp);letter-spacing:-.005em}
.sl-cta-a{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;transition:border-color .45s,transform .45s cubic-bezier(.2,.6,.2,1)}
.sl-cta-a svg{width:15px;height:15px;transform:rotate(-45deg);transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.sl-cta:hover{transform:translateY(-2px);border-color:transparent;box-shadow:0 18px 40px -18px rgba(233,85,10,.55)}
.sl-cta:hover .sl-cta-fill{transform:translateY(0)}
.sl-cta:hover .sl-cta-a{border-color:rgba(255,255,255,.85);transform:translateX(2px)}
.sl-cta:hover .sl-cta-a svg{transform:rotate(0deg) translateX(1px)}
.sl-cta:active{transform:translateY(-1px) scale(.985)}
.sl-cta:focus-visible{outline:2px solid var(--scale);outline-offset:4px}
@media(max-width:600px){.sl-in{padding:0 20px}.sl-cta{padding:15px 22px 15px 26px}}
@media(prefers-reduced-motion:reduce){
  .sl-cta,.sl-cta-fill,.sl-cta-a,.sl-cta-a svg{transition:none}
  .sl-cta:hover{background:var(--scale);transform:none;box-shadow:none}
}
/* entrance — animation-based so it never fights the CTA hover transitions */
.sl-stage:not(.is-visible) .sl-eyebrow,.sl-stage:not(.is-visible) .sl-h,.sl-stage:not(.is-visible) .sl-p,.sl-stage:not(.is-visible) .sl-cta{opacity:0}
.sl-stage.is-visible .sl-eyebrow{animation:slrise .6s cubic-bezier(.2,.6,.2,1) 0s backwards}
.sl-stage.is-visible .sl-h{animation:slrise .6s cubic-bezier(.2,.6,.2,1) .08s backwards}
.sl-stage.is-visible .sl-p{animation:slrise .6s cubic-bezier(.2,.6,.2,1) .16s backwards}
.sl-stage.is-visible .sl-cta{animation:slrise .6s cubic-bezier(.2,.6,.2,1) .26s backwards}
@keyframes slrise{from{opacity:0;transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){
  .sl-stage:not(.is-visible) .sl-eyebrow,.sl-stage:not(.is-visible) .sl-h,.sl-stage:not(.is-visible) .sl-p,.sl-stage:not(.is-visible) .sl-cta{opacity:1}
  .sl-stage.is-visible .sl-eyebrow,.sl-stage.is-visible .sl-h,.sl-stage.is-visible .sl-p,.sl-stage.is-visible .sl-cta{animation:none}
}

/* ---- Equipment landing — homepage section between About and the equipment carousel ---- */
#equipment-landing{position:relative;z-index:2;background:#0f0e0c}
#equipment-landing .sl-stage{position:relative;height:100vh;min-height:600px}
/* two long lines need a wider measure + slightly smaller top end than the Sustainability headline */
#equipment-landing .sl-in{max-width:1120px}
#equipment-landing .sl-h{font-size:clamp(34px,5.4vw,78px)}
@media(max-width:640px){#equipment-landing .sl-h br{display:none}}

/* ---- Light-background variant of the site CTA -----------------------------
   Same geometry, same orange sweep, same arrow ring and press/focus states as
   the dark landings — only the resting colours differ, so the two read as one
   component. Used by the homepage About section. ------------------------- */
.sl-cta--light{color:var(--ink);border-color:rgba(21,24,29,.24);background:#fff;backdrop-filter:none;
  box-shadow:0 18px 44px -34px rgba(21,24,29,.5)}
.sl-cta--light .sl-cta-a{border-color:rgba(21,24,29,.32)}
/* Legibility during the sweep: the fill rises over .55s, so the label and arrow
   must NOT flip to white until it has actually reached them — otherwise there is
   a moment of white-on-white. They change at .26s in, and revert instantly on
   mouse-out. A hairline shadow keeps white text readable on the orange. */
.sl-cta--light .sl-cta-t,.sl-cta--light .sl-cta-a,.sl-cta--light .sl-cta-a svg{transition:color .18s ease 0s,border-color .18s ease 0s,transform .45s cubic-bezier(.2,.6,.2,1)}
.sl-cta--light:hover{border-color:transparent;box-shadow:0 22px 50px -26px rgba(233,85,10,.55)}
.sl-cta--light:hover .sl-cta-t{color:#fff;transition-delay:.26s;text-shadow:0 1px 2px rgba(76,26,0,.35)}
.sl-cta--light:hover .sl-cta-a{color:#fff;border-color:rgba(255,255,255,.9);transition-delay:.26s}
.sl-cta--light:focus-visible{outline:2px solid var(--scale);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .sl-cta--light .sl-cta-t,.sl-cta--light .sl-cta-a,.sl-cta--light .sl-cta-a svg{transition:none}
  .sl-cta--light:hover .sl-cta-t,.sl-cta--light:hover .sl-cta-a{transition-delay:0s}
}

/* On white, the standard #E9550A fill only reaches 3.6:1 behind a white label —
   under the 4.5:1 bar for this size. The light variant deepens it to #CC4708
   (4.7:1) and still reads as the same brand orange. */
.sl-cta--light .sl-cta-fill{background:linear-gradient(120deg,#CC4708,#E05C12)}

/* Solid primary — for light sections where the CTA should lead rather than
   recede. Same geometry and easing as the other variants; the sweep deepens
   the fill on hover instead of introducing it, so the white label is legible
   at every moment (5.1:1 at rest, 6.8:1 hovered). */
.sl-cta--solid{color:#fff;border-color:transparent;background:linear-gradient(120deg,#CC4708,#E05C12);
  box-shadow:0 16px 34px -18px rgba(204,71,8,.6)}
.sl-cta--solid .sl-cta-fill{background:linear-gradient(120deg,#A33705,#C24308)}
.sl-cta--solid .sl-cta-a{border-color:rgba(255,255,255,.55)}
.sl-cta--solid:hover{color:#fff;border-color:transparent;box-shadow:0 22px 44px -18px rgba(204,71,8,.7)}
.sl-cta--solid:hover .sl-cta-a{border-color:rgba(255,255,255,.9)}

/* ---- Dark variant of the site CTA -----------------------------------------
   For light sections where the primary action should anchor like the landing
   heroes. Identical geometry, sweep, arrow ring, easing, press and focus as
   the base capsule — only the resting surface differs: a dark translucent
   pill so the white label never needs a mid-sweep colour flip. The fill uses
   the deepened orange (#CC4708→#E05C12, 4.7:1 behind white) shared with the
   light variant. Used by the homepage About section. ---------------------- */
.sl-cta--dark{color:#fff;border-color:rgba(21,24,29,.85);background:rgba(21,24,29,.92);backdrop-filter:blur(10px);
  box-shadow:0 22px 52px -32px rgba(21,24,29,.6)}
.sl-cta--dark .sl-cta-a{border-color:rgba(255,255,255,.45)}
.sl-cta--dark .sl-cta-fill{background:linear-gradient(120deg,#CC4708,#E05C12)}
.sl-cta--dark:hover{border-color:transparent;box-shadow:0 24px 54px -26px rgba(233,85,10,.55)}
.sl-cta--dark:hover .sl-cta-a{border-color:rgba(255,255,255,.9)}
.sl-cta--dark:focus-visible{outline:2px solid var(--scale);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sl-cta--dark:hover{background:#CC4708}}