/**
 * Whitesand Beauty: Brandbook Cover Hero (#ws-hero-perspective-stage)
 *
 * Full-bleed adaptation of Brand Book slide 01: chiaroscuro profile portrait,
 * architectural hairline grid with crosshair marks, oversized slogan placed in
 * the dark negative space. Strict monochrome (#121212 / #1E1E1E / #F9FEFF / grays).
 *
 * Shared by template-parts/sections/hero-mosaic.php and scripts/serve-preview.js.
 */

.ws-cover {
    --ws-cover-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ws-cover-band: 112px;
    --ws-cover-gutter: 7.8%;
    --ws-cover-line: rgba(255, 255, 255, 0.12);
    --ws-cover-px: 0px;
    --ws-cover-py: 0px;

    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    background: #121212;
    color: #F9FEFF;
}

/* Layer 1: Portrait */
.ws-cover__media {
    position: absolute;
    inset: -12px;
    z-index: 0;
    /* No will-change here: in Chromium it blanks the filtered portrait while the sweep animates. */
    transform: translate3d(var(--ws-cover-px), var(--ws-cover-py), 0);
}

.ws-cover__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 38%;
    transform-origin: 32% 45%;
    animation: ws-cover-push 2.6s var(--ws-cover-ease) 0.1s both;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Slow monochrome light sweep across the face */
.ws-cover__sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 30% 48% at 34% 44%, rgba(249, 254, 255, 0.07) 0%, rgba(249, 254, 255, 0.025) 45%, rgba(249, 254, 255, 0) 72%);
    opacity: 0;
    animation:
        ws-cover-fade 2s ease 1.6s forwards,
        ws-cover-sweep 16s ease-in-out 1.6s infinite alternate;
}

/* Layer 2: Scrim. Constitution VI §11 stops (black 85 / 40 / 25), with the 40% stop
   held low and the middle left clear so the already-dark portrait keeps its face. */
.ws-cover__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.40) 16%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.25) 100%),
        linear-gradient(to left, rgba(18, 18, 18, 0.80) 0%, rgba(18, 18, 18, 0.45) 30%, rgba(18, 18, 18, 0) 50%);
}

/* Layer 3: Brand Book hairline grid */
.ws-cover__grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform: translate3d(calc(var(--ws-cover-px) * -0.5), calc(var(--ws-cover-py) * -0.5), 0);
}

.ws-cover__vline {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x);
    width: 1px;
    background: var(--ws-cover-line);
    transform-origin: top;
    animation: ws-cover-draw-y 1.6s var(--ws-cover-ease) var(--d, 0.3s) both;
}

.ws-cover__hline {
    position: absolute;
    top: var(--ws-cover-band);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ws-cover-line);
    transform-origin: left;
    animation: ws-cover-draw-x 1.8s var(--ws-cover-ease) 0.2s both;
}

.ws-cover__cross {
    position: absolute;
    top: var(--ws-cover-band);
    left: var(--x);
    width: 25px;
    height: 25px;
    margin: -12px 0 0 -12px;
    animation: ws-cover-fade 1.2s ease var(--d, 1.2s) both;
}

.ws-cover__cross::before,
.ws-cover__cross::after {
    content: "";
    position: absolute;
    background: rgba(249, 254, 255, 0.55);
}

.ws-cover__cross::before { left: 12px; top: 0; width: 1px; height: 100%; }
.ws-cover__cross::after  { top: 12px; left: 0; height: 1px; width: 100%; }

/* Top meta band (Brand Book header row) */
.ws-cover__band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ws-cover-band);
    z-index: 3;
    pointer-events: none;
}

.ws-cover__meta {
    position: absolute;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.5;
    animation: ws-cover-rise 1.2s var(--ws-cover-ease) 1s both;
}

.ws-cover__meta--start { left: var(--ws-cover-gutter); }
.ws-cover__meta--end   { left: 83.2%; }

.ws-cover__meta strong { font-weight: 500; color: #F9FEFF; }
.ws-cover__meta span   { color: #9E9E9E; font-weight: 300; }

/* Layer 4: Editorial type column */
.ws-cover__content {
    position: absolute;
    z-index: 4;
    left: 58.5%;
    right: 6%;
    top: calc(var(--ws-cover-band) + 24px);
    bottom: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
}

.ws-cover__eyebrow {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9E9E9E;
    animation: ws-cover-rise 1.2s var(--ws-cover-ease) 0.9s both;
}

/* Its face comes from its lang attribute (components.css): the other language from the page's. */
.ws-cover__eyebrow:lang(fa) { letter-spacing: 0; text-transform: none; font-size: 14px; }

.ws-cover__title {
    margin: 0;
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #F9FEFF;
}

.ws-cover__title:lang(fa) { letter-spacing: 0; line-height: 1.35; }

.ws-cover__title:lang(en) { font-size: clamp(2.1rem, 1rem + 3.2vw, 4rem); text-transform: uppercase; }

.ws-cover__line {
    display: block;
    overflow: hidden;
    padding-block: 0.06em;
}

.ws-cover__line > span {
    display: block;
    animation: ws-cover-line 1.4s var(--ws-cover-ease) var(--d, 1s) both;
}

.ws-cover__lead {
    max-width: 34rem;
    margin: 1.5rem 0 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(249, 254, 255, 0.72);
    animation: ws-cover-rise 1.2s var(--ws-cover-ease) 1.45s both;
}

.ws-cover__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2.25rem;
    animation: ws-cover-rise 1.2s var(--ws-cover-ease) 1.6s both;
}

.ws-cover__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: 9999px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s var(--ws-cover-ease), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.ws-cover__btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.ws-cover__btn:focus-visible { outline: 1px solid #F9FEFF; outline-offset: 4px; }

/* .ws-cover__btn--primary is the tactile liquid-glass button: assets/css/components.css */

.ws-cover__btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(18, 18, 18, 0.35);
    color: #F9FEFF;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

.ws-cover__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); }

.ws-cover__btn:hover { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0); }
.ws-cover__btn:active { transform: scale(0.97); }

/* Layer 5: Clinical authority strip */
.ws-cover__strip {
    position: absolute;
    z-index: 4;
    left: var(--ws-cover-gutter);
    right: var(--ws-cover-gutter);
    bottom: 32px;
    display: flex;
    align-items: flex-end;
    gap: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--ws-cover-line);
    animation: ws-cover-fade 1.4s ease 1.9s both;
}

.ws-cover__stat { display: flex; flex-direction: column; gap: 4px; }

.ws-cover__stat-code {
    font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(249, 254, 255, 0.42);
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .ws-cover__stat-code { text-align: right; }

.ws-cover__stat-label { font-size: 13px; font-weight: 400; color: rgba(249, 254, 255, 0.88); letter-spacing: 0; }

.ws-cover__stat-sep { width: 1px; height: 28px; background: var(--ws-cover-line); }

/* Keyframes */
@keyframes ws-cover-push   { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes ws-cover-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-cover-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ws-cover-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ws-cover-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ws-cover-line   { from { transform: translateY(110%); } to { transform: none; } }
@keyframes ws-cover-sweep  { from { transform: translate3d(-14%, -4%, 0); } to { transform: translate3d(12%, 6%, 0); } }

/* Hold the entrance until the logo intro overlay has finished */
html.ws-intro-pending .ws-cover *,
html.ws-intro-pending .ws-cover *::before,
html.ws-intro-pending .ws-cover *::after,
body.ws-intro-active .ws-cover *,
body.ws-intro-active .ws-cover *::before,
body.ws-intro-active .ws-cover *::after {
    animation-play-state: paused;
}

/* Tablet */
@media (max-width: 1024px) {
    .ws-cover__content { left: 50%; right: 5%; }
    .ws-cover__meta--end { left: auto; right: var(--ws-cover-gutter); }
    .ws-cover__vline--3,
    .ws-cover__cross--3 { display: none; }
}

/* Mobile: portrait on top, type stacked below on solid charcoal */
@media (max-width: 640px) {
    .ws-cover {
        --ws-cover-band: 0px;
        --ws-cover-gutter: 20px;
        height: auto;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 20px 28px;
    }

    .ws-cover__media { inset: 0 0 auto 0; height: 62svh; transform: none; }
    .ws-cover__img { object-position: 20% 40%; }

    .ws-cover__scrim {
        height: 62svh;
        background:
            linear-gradient(to top, #121212 0%, rgba(18, 18, 18, 0.7) 22%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.35) 100%);
    }

    .ws-cover__grid { transform: none; }
    .ws-cover__vline--2,
    .ws-cover__vline--3,
    .ws-cover__hline,
    .ws-cover__cross,
    .ws-cover__band { display: none; }
    .ws-cover__vline--0 { left: 20px; }
    .ws-cover__vline--1 { left: auto; right: 20px; }

    .ws-cover__content {
        position: relative;
        inset: auto;
        margin-top: 50svh;
    }

    .ws-cover__eyebrow { margin-bottom: 0.75rem; font-size: 11px; }
    .ws-cover__lead { margin-top: 1rem; font-size: 14px; line-height: 1.8; }
    .ws-cover__actions { margin-top: 1.5rem; gap: 10px; width: 100%; }
    .ws-cover__btn { flex: 1 1 auto; justify-content: center; height: 48px; padding: 0 18px; font-size: 13px; }

    .ws-cover__strip {
        position: relative;
        inset: auto;
        margin-top: 1.75rem;
        gap: 20px;
        justify-content: space-between;
    }

    .ws-cover__stat--3,
    .ws-cover__stat-sep--2 { display: none; }
}

@media (max-height: 700px) and (min-width: 641px) {
    .ws-cover__lead { display: none; }
}

/* Reduced motion: static and fully visible */
@media (prefers-reduced-motion: reduce) {
    .ws-cover *,
    .ws-cover *::before,
    .ws-cover *::after {
        animation: none !important;
        transition: none !important;
    }
    .ws-cover__sweep { display: none; }
    .ws-cover__media,
    .ws-cover__grid { transform: none !important; }
}

/* Replay control for the logo intro (main.js delegates the click) */
.ws-cover__intro {
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #F9FEFF;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    pointer-events: auto;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s var(--ws-cover-ease);
}
.ws-cover__intro:hover,
.ws-cover__intro:focus-visible { background-size: 100% 1px; outline: none; }