/* Hero layout SFH2026 OCEAN — the sfh2026 hero over a live WebGL sea.
 *
 * @import rather than a copy: every rule about the TEXT — the two-tone heading,
 * the eyebrow, the topbar, the red pill, the bar pagination, every breakpoint —
 * is identical to the photo hero and must stay identical. Only the background
 * differs, and only the background is below.
 */
@import url("./sfh2026.css");

/* The canvas fills the hero and sits under everything the reader looks at.
   z-index 0 rather than -1: a negative index would put it behind the section's
   own background and it would disappear entirely. */
.sfh-hero-ocean { position: relative; background: #061726; }
.sfh-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    /* The renderer sets the backing-store size itself from devicePixelRatio and
       its own tier cap; without this the CSS box and the drawing buffer disagree
       and the sea renders at the wrong scale. */
    pointer-events: none;
}

/* The still, behind the canvas. Visible immediately — shaders take a moment to
   compile, and a black hero in that window reads as a broken page — then simply
   covered once the sea draws over it. */
.sfh-hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

/* No WebGL: hero_ocean.js adds this and the canvas never paints, so the still is
   all there is. The photo hero, exactly as it is today. */
.sfh-hero-ocean.no-webgl .sfh-hero-canvas { display: none; }

/* The slides themselves must not carry a background any more — the sea is the
   background — but they still stack, fade and hold the copy. */
.sfh-hero-ocean .cms2-slide { background: none; }
/* A slide that brings its own photo or video hides the sea for that slide. Above
   the canvas, below the shade — so the copy stays readable either way. */
.sfh-hero-ocean .sfh-hero-media { z-index: 1; }
/* z-index ONLY. These are all `position: absolute` in the photo layout, which is
   what centres the copy (`top: 50%` + `translateY(-50%)`), and forcing them to
   `relative` here — which the first version did, to lift them over the canvas —
   silently turned that into an offset from their normal flow position instead.
   The copy then sat 100px low: measured 252px of space above it against 152
   below, where the prototype has 265/265.
   Absolute elements take a z-index without being repositioned, so the stacking
   is all this rule ever needed to do. */
.sfh-hero-ocean .sfh-hero-shade,
.sfh-hero-ocean .sfh-hero-topbar,
.sfh-hero-ocean .sfh-hero-content,
.sfh-hero-ocean .sfh-hero-pagination { z-index: 2; }

/* ------------------------------------------------------------------ prototype
   The two layers the photo hero has no need of, and the shade it draws
   differently. Ported from lixo/three/css/style.css so the sea reads here the
   way it does there. */

/* Grain. A GPU gradient is mathematically smooth and bands visibly across a wide
   dark hero; noise at `overlay` breaks the bands without lifting the blacks. The
   SVG is a fractalNoise filter in a data URI — no request, no image file. */
.sfh-hero-ocean .sfh-hero-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* The shade. The photo hero's is tuned for a photograph and goes to pure black;
   the sea is darker and bluer, so the prototype tints toward navy and reaches
   further across. Two layers: one from the left for the copy, one down from the
   top for the header. */
.sfh-hero-ocean .sfh-hero-shade {
    background: linear-gradient(105deg,
                    rgba(0,10,22,.88) 0%,
                    rgba(0,10,22,.66) 32%,
                    rgba(0,10,22,.24) 56%,
                    rgba(0,10,22,0)   76%),
                linear-gradient(180deg,
                    rgba(0,8,18,.6) 0%,
                    rgba(0,8,18,0) 34%);
}

/* Scroll cue. `right` uses the same max() the theme uses elsewhere, so it lands
   on the content grid when wide and on the 20px gutter when narrow. */
.sfh-hero-ocean .sfh-hero-scroll {
    position: absolute;
    right: max(20px, calc(50% - (var(--cms2-max-width, 1280px) / 2)));
    bottom: 30px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    pointer-events: none;
}
.sfh-hero-ocean .sfh-hero-scroll span {
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    animation: sfh-hero-drop 2s ease-in-out infinite;
}
@keyframes sfh-hero-drop {
    0%, 100% { transform: scaleY(.4); transform-origin: top; }
    50%      { transform: scaleY(1);  transform-origin: top; }
}
/* A cue that pulses for ever is exactly the motion someone turns this off for. */
@media (prefers-reduced-motion: reduce) {
    .sfh-hero-ocean .sfh-hero-scroll span { animation: none; }
}
@media (max-width: 760px) {
    /* No room beside the pagination bars on a phone. */
    .sfh-hero-ocean .sfh-hero-scroll { display: none; }
}

/* The three pieces of type the prototype treats differently. Scoped to
   .sfh-hero-ocean throughout, so the photo hero keeps the flat treatment it was
   designed with. */

/* Eyebrow as a glass pill with a pulsing dot, rather than plain caps. The dot is
   a ::before, so the slot stays pure text and an editor cannot break it. */
.sfh-hero-ocean .sfh-hero-eyebrow {
    display: inline-flex;
    align-items: center;
   width: fit-content;
    gap: 10px;
    margin: 0 0 14px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.sfh-hero-ocean .sfh-hero-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #be202e;
    box-shadow: 0 0 0 4px rgba(190,32,46,.32);
    animation: sfh-hero-pulse 2.4s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes sfh-hero-pulse {
    50% { box-shadow: 0 0 0 9px rgba(190,32,46,0); }
}
@media (prefers-reduced-motion: reduce) {
    .sfh-hero-ocean .sfh-hero-eyebrow::before { animation: none; }
}

/* The accent line is a gradient, not flat red — it is what gives the heading its
   lift against the water. background-clip:text needs a transparent fill to show
   through, and the -webkit- prefixes are still required by Safari.

   This gradient is the hero's own, tuned against the water. It is deliberately
   NOT shared with the jumbotron panel's accent heading, which Figma specifies as
   a different fill -- the two were briefly wired to one custom property and that
   made this file the reason the panel stopped matching its design. */
.sfh-hero-ocean .sfh-hero-heading-red {
    color: #fff;
    background: linear-gradient(100deg, #ff6b6b 0%, #e02d3c 44%, #ffb073 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Both lines get a soft shadow: over moving water, flat white type loses its
   edge wherever a crest catches the sun. */
.sfh-hero-ocean .sfh-hero-heading-white,
.sfh-hero-ocean .sfh-hero-heading-red { text-shadow: 0 4px 40px rgba(0,0,0,.45); }
/* The gradient fill is painted THROUGH the glyphs, so a text-shadow on that span
   would be cast by a transparent fill and show as a grey blur. Give it to a
   pseudo-element behind instead — or, as here, accept that the accent line has
   the shade beneath it doing the same job. */
.sfh-hero-ocean .sfh-hero-heading-red { text-shadow: none; }

.sfh-hero-ocean .sfh-hero-desc { text-shadow: 0 2px 18px rgba(0,0,0,.5); }