/* ========================================== HERO POST — Cinematic post hero ========================================== */ .hero-post { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; box-sizing: border-box; padding: 12vh var(--space-section-x) 10vh; background: var(--bg-color); color: var(--color-white); font-family: var(--font-family-base); margin-bottom: 12vh; } /* Sound mute/unmute control (rendered only when the hero has an MP3). */ .hero-post__sound-toggle { position: absolute; z-index: 5; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--color-white); background: rgba(var(--color-dark-blue-rgb), 0.55); border: 1px solid rgba(var(--color-white-rgb), 0.35); border-radius: 50%; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .hero-post__sound-toggle:hover { background: rgba(var(--color-dark-blue-rgb), 0.85); border-color: rgba(var(--color-white-rgb), 0.6); } .hero-post__sound-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .hero-post__sound-icon { display: block; pointer-events: none; } .hero-post__sound-icon--off { display: none; } .hero-post__sound-toggle.is-muted .hero-post__sound-icon--on { display: none; } .hero-post__sound-toggle.is-muted .hero-post__sound-icon--off { display: block; } @media (max-width: 768px) { .hero-post__sound-toggle { width: 2.5rem; height: 2.5rem; } } /* Auto Height toggle (off by default): let the block shrink to its content instead of filling the viewport. Compound selector overrides the base and the responsive `min-height` rules at every breakpoint. */ .hero-post.hero-post--auto-height { min-height: 0; padding-top: 150px; } /* Page-load reveal — output at level (see soufflet_malt_hero_post_reveal) so the gold wipe covers the WHOLE page, not just the hero. Plays once on load via pure CSS, then rests wiped-away (scaleX 0), invisible and non-interactive. */ .hero-post__reveal { position: fixed; inset: 0; z-index: 1000000; background: var(--gold); transform-origin: right center; pointer-events: none; animation: hp-reveal-wipe 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards; } @media (prefers-reduced-motion: reduce) { .hero-post__reveal { display: none; } } .hero-post__bg { position: absolute; left: 0; right: 0; /* Vertical overscan so the scroll parallax can drift without revealing edges. */ top: 0%; height: 100%; z-index: 0; overflow: hidden; will-change: transform; } .hero-post__bg-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.2); filter: grayscale(15%) contrast(1.05); will-change: transform, opacity; } .hero-post__bg-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(var(--color-dark-blue-rgb), 0.55) 0%, rgba(var(--color-dark-blue-rgb), 0.7) 45%, rgba(var(--color-dark-blue-rgb), 0.95) 100% ), linear-gradient( 90deg, rgba(var(--color-dark-blue-rgb), 0.6) 0%, rgba(var(--color-dark-blue-rgb), 0.1) 60%, rgba(var(--color-dark-blue-rgb), 0) 100% ); } .hero-post__deco-totem { position: absolute; right: -15vw; top: 50%; z-index: 2; width: min(70vh, 520px); height: min(70vh, 520px); background: var(--gold); -webkit-mask: url('../../assets/images/totem.svg') center center / contain no-repeat; mask: url('../../assets/images/totem.svg') center center / contain no-repeat; opacity: 0; mix-blend-mode: overlay; pointer-events: none; user-select: none; transform: translateY(-50%); will-change: transform, opacity; } .hero-post__inner { position: relative; z-index: 3; width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: flex-start; } .hero-post__label { position: relative; display: inline-block; margin-bottom: var(--space-xl); padding-left: 28px; font-family: var(--font-family-base); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-bold); line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateX(-40px); } .hero-post__label::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: var(--gold); transform: translateY(-50%) scaleX(0); transform-origin: left center; transition: var(--transition-transform); } .hero-post.is-visible .hero-post__label::before { transform: translateY(-50%) scaleX(1); } .hero-post__title { max-width: 940px; margin: 0 0 var(--space-xl); font-family: var(--font-family-base); font-size: var(--font-size-h1); font-weight: var(--font-weight-black); line-height: var(--line-height-heading); text-transform: uppercase; color: var(--color-white); } .hero-post__title-line { display: block; overflow: hidden; line-height: var(--line-height-flat); } .hero-post__title-word { display: inline-block; transform: translateY(110%); will-change: transform; } .hero-post__gold { color: var(--gold); font-style: normal; } .hero-post__lead { max-width: 620px; margin: 0 0 var(--space-3xl); font-family: var(--font-family-base); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-copy-compact); color: rgba(var(--color-white-rgb), 1); opacity: 0; transform: translateX(-40px); } .hero-post__lead a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.2em; } .hero-post__scroll-hint { position: absolute; right: 1vw; bottom: 2rem; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; } .hero-post__scroll-line { display: block; width: 1px; height: 50px; background: linear-gradient(180deg, var(--gold) 0%, transparent 100%); transform-origin: top center; animation: hp-scroll-pulse 2.4s ease-in-out infinite; } .hero-post__scroll-text { font-family: var(--font-family-base); font-size: var(--font-size-3xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-section); text-transform: uppercase; color: rgba(var(--color-white-rgb), 0.35); writing-mode: vertical-rl; text-orientation: mixed; } .hero-post.is-visible .hero-post__bg-image { animation: hp-bg-reveal 20s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } .hero-post.is-visible .hero-post__deco-totem { opacity: 0.4; } .hero-post.is-visible .hero-post__label { animation: hp-slide-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards; } /* Breadcrumb: same slide-in as the label, just before it. */ .hero-post__breadcrumb { opacity: 0; transform: translateX(-40px); } .hero-post.is-visible .hero-post__breadcrumb { animation: hp-slide-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards; } .hero-post.is-visible .hero-post__title-word { animation: hp-word-rise 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-post.is-visible .hero-post__title-line:nth-child(1) .hero-post__title-word { animation-delay: 1s; } .hero-post.is-visible .hero-post__title-line:nth-child(2) .hero-post__title-word { animation-delay: 1.15s; } .hero-post.is-visible .hero-post__title-line:nth-child(3) .hero-post__title-word { animation-delay: 1.3s; } .hero-post.is-visible .hero-post__title-line:nth-child(4) .hero-post__title-word { animation-delay: 1.45s; } .hero-post.is-visible .hero-post__title-line:nth-child(5) .hero-post__title-word { animation-delay: 1.6s; } .hero-post.is-visible .hero-post__lead { animation: hp-slide-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards; } .hero-post.is-visible .hero-post__scroll-hint { animation: hp-fade-in 1s ease-out 2s forwards; } @keyframes hp-bg-reveal { to { opacity: 1; transform: scale(1); } } @keyframes hp-slide-right { to { opacity: 1; transform: translateX(0); } } @keyframes hp-word-rise { to { transform: translateY(0); } } @keyframes hp-fade-in { to { opacity: 1; } } @keyframes hp-reveal-wipe { to { transform: scaleX(0); } } @keyframes hp-scroll-pulse { 0%, 100% { opacity: 0.2; transform: scaleY(1); } 50% { opacity: 0.7; transform: scaleY(1.4); } } @media (max-width: 1023px) { .hero-post { min-height: 100svh; padding: var(--section-padding-mobile-offset); } .hero-post__deco-totem { right: -22vw; width: min(50vh, 320px); height: min(50vh, 320px); } .hero-post__label { margin-bottom: var(--space-lg); } .hero-post__title { font-size: clamp(2.1rem, 10.5vw, 3.2rem); line-height: var(--line-height-heading-relaxed); margin-bottom: 1.8rem; max-width: 100%; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } /* The reveal animation wraps each line in an inline-block word span, which shrink-to-fits its content — so the title's overflow-wrap can't reach it and a very long word overflows the viewport. Constrain it and let it break. */ .hero-post__title-word { max-width: 100%; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .hero-post__lead { margin-bottom: var(--space-xl); font-size: var(--font-size-body-mobile); line-height: var(--line-height-copy-compact); } .hero-post__scroll-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-post__reveal { display: none; } .hero-post__scroll-line { opacity: 0.5; animation: none; } .hero-post__bg-image, .hero-post__deco-totem, .hero-post__breadcrumb, .hero-post__label, .hero-post__lead, .hero-post__scroll-hint { opacity: 1 !important; transform: none !important; animation: none !important; } .hero-post__deco-totem { opacity: 0.4 !important; transform: translateY(-50%) !important; } .hero-post__title-word { transform: none !important; animation: none !important; } .hero-post__label::before { transform: translateY(-50%) scaleX(1) !important; } }