/* ============================================================ EADPAG — cinematic layer Loaded after styles.css. Everything here degrades to the existing static layout if JS is off or motion is reduced. ============================================================ */ /* ---------- 1. Directed opening sequence ---------- */ /* The hero plays as a timed sequence rather than everything at once. .cine-ready is set by JS on once the sequence can start. */ .cine .hero-v2 .hero-enter{opacity:0;} .cine-ready .hero-v2 .hero-enter{ animation:cineRise .82s cubic-bezier(.16,.84,.36,1) forwards; } .cine-ready .hero-v2 .d1{animation-delay:.06s} .cine-ready .hero-v2 .d2{animation-delay:.20s} .cine-ready .hero-v2 .d3{animation-delay:.62s} .cine-ready .hero-v2 .d4{animation-delay:1.02s} @keyframes cineRise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} } /* Headline reveals line by line behind a rising mask */ .cine .hero-v2 h1 .cine-line{display:block; overflow:hidden;} .cine .hero-v2 h1 .cine-line > span{display:block; transform:translateY(105%);} .cine-ready .hero-v2 h1 .cine-line > span{ animation:cineLine .92s cubic-bezier(.16,.84,.36,1) forwards; } .cine-ready .hero-v2 h1 .cine-line:nth-child(1) > span{animation-delay:.24s} .cine-ready .hero-v2 h1 .cine-line:nth-child(2) > span{animation-delay:.36s} .cine-ready .hero-v2 h1 .cine-line:nth-child(3) > span{animation-delay:.48s} @keyframes cineLine{to{transform:none;}} /* Falcon rises into frame and settles */ .cine .falcon-wrap{opacity:0;} .cine-ready .falcon-wrap{ animation:cineFalcon 1.5s cubic-bezier(.18,.8,.3,1) .34s forwards; } @keyframes cineFalcon{ from{opacity:0; transform:translateY(30px) scale(1.045);} to{opacity:1; transform:none;} } /* ---------- 2. Ambient field behind the hero ---------- */ #cineField{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0; transition:opacity 1.4s ease .5s; } .cine-ready #cineField{opacity:.5;} .hero-v2 > .wrap{position:relative; z-index:1;} /* ---------- 3. Horizon wipe on section entry ---------- */ /* A thin light line sweeps the top edge as the section arrives — the falcon's horizon, reused as a transition. */ .cine .cine-scene{position:relative;} .cine .cine-scene::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:scaleX(0); transform-origin:left center; opacity:0; } .cine .cine-scene.lit::before{ animation:cineWipe 1.15s cubic-bezier(.22,.7,.3,1) forwards; } @keyframes cineWipe{ 0%{transform:scaleX(0); opacity:0;} 22%{opacity:.9;} 100%{transform:scaleX(1); opacity:0;} } /* Content lifts in just behind the wipe */ .cine .cine-scene > .wrap{opacity:0; transform:translateY(18px);} .cine .cine-scene.lit > .wrap{ transition:opacity .8s ease .12s, transform .8s cubic-bezier(.16,.84,.36,1) .12s; opacity:1; transform:none; } /* ---------- 4. Hero parallax ---------- */ .cine .falcon-wrap img{will-change:transform;} /* ---------- 5. Sticky process scene ---------- */ .cine-stage{position:relative;} @media(min-width:961px){ .cine .cine-stage{min-height:340vh;} .cine .cine-stage .cine-pin{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; } /* Steps stack in place; only the active one is fully present */ .cine .cine-stage .process-track{ display:block; position:relative; min-height:230px; } .cine .cine-stage .process-step{ position:absolute; inset:0 auto auto 0; width:100%; opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,.84,.36,1); pointer-events:none; } .cine .cine-stage .process-step.active{ opacity:1; transform:none; pointer-events:auto; } .cine .cine-stage .process-step.past{ opacity:0; transform:translateY(-18px); } } /* Scene rail — shows position through the five stages */ .cine-rail{display:none;} @media(min-width:961px){ .cine .cine-rail{ display:flex; gap:10px; align-items:center; margin-bottom:26px; } .cine .cine-rail .seg{ height:2px; flex:1; background:var(--border); border-radius:1px; position:relative; overflow:hidden; } .cine .cine-rail .seg::after{ content:''; position:absolute; inset:0; width:0; background:var(--accent); transition:width .45s ease; } .cine .cine-rail .seg.done::after{width:100%;} .cine .cine-rail .seg.now::after{width:100%; background:var(--teal);} .cine .cine-rail .cnt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--text-faint); white-space:nowrap; } .cine .cine-rail .cnt b{color:var(--accent); font-weight:600;} } /* ---------- Illustrative label on the training dial ---------- */ .dial-illustrative{ display:block; margin-top:9px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); opacity:.75; } /* ---------- Quality floor ---------- */ @media(prefers-reduced-motion:reduce){ .cine .hero-v2 .hero-enter, .cine-ready .hero-v2 .hero-enter{animation:none !important; opacity:1 !important;} .cine .hero-v2 h1 .cine-line > span, .cine-ready .hero-v2 h1 .cine-line > span{animation:none !important; transform:none !important;} .cine .falcon-wrap, .cine-ready .falcon-wrap{animation:none !important; opacity:1 !important; transform:none !important;} .cine .cine-scene::before{display:none;} .cine .cine-scene > .wrap{opacity:1 !important; transform:none !important; transition:none;} #cineField{display:none;} .cine .cine-stage{min-height:0 !important;} .cine .cine-stage .cine-pin{position:static !important; min-height:0 !important;} .cine .cine-stage .process-track{display:grid !important;} .cine .cine-stage .process-step{position:static !important; opacity:1 !important; transform:none !important;} } /* ---------- Pre-existing fix: hero CTA overflowed at 390px ---------- */ @media(max-width:430px){ .hero-cta-row{flex-wrap:wrap;} /* Long CTA labels overflowed the viewport on small phones. */ .btn, .btn-grad, .btn-solid, .btn-outline{ max-width:100%; white-space:normal; text-align:center; } } /* ============================================================ Hero image + dial refinement The falcon previously had one soft edge (left) and three hard crops, which read as a pasted rectangle. All four edges now dissolve into the page, and the dial sits clear of the seam. ============================================================ */ .falcon-wrap img{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 11%), linear-gradient(to top, transparent 0, #000 13%); -webkit-mask-composite:source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 11%), linear-gradient(to top, transparent 0, #000 13%); mask-composite:intersect; } html[dir="rtl"] .falcon-wrap img{ -webkit-mask-image: linear-gradient(to left, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 11%), linear-gradient(to top, transparent 0, #000 13%); mask-image: linear-gradient(to left, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 11%), linear-gradient(to top, transparent 0, #000 13%); } /* Ambient glow behind the bird, so it sits in light rather than on a slab */ .falcon-wrap::before{ inset:2% 0 0 0 !important; background:radial-gradient(ellipse at 62% 46%, rgba(63,191,174,.16), transparent 62%) !important; filter:blur(46px) !important; } /* Dial: moved off the image seam and given a proper instrument backdrop */ .falcon-dial{left:4%; bottom:14%; width:min(200px,34%);} .falcon-dial .dial::before{ inset:-20%; background:radial-gradient(circle, rgba(13,17,23,.92) 46%, rgba(13,17,23,.55) 66%, transparent 78%); } @media(max-width:900px){ .falcon-dial{left:3%; bottom:10%; width:min(160px,36%);} } /* ============================================================ HERO — full-bleed composition Artwork bleeds off the top and right edge and dissolves into the page on the left. Copy sits on the dark side. ============================================================ */ .hero-cine{position:relative; overflow:hidden; padding-top:0;} .hero-art{ position:absolute; top:0; right:0; bottom:0; width:min(66%, 1120px); z-index:0; pointer-events:none; } .hero-art img{ width:100%; height:100%; object-fit:cover; object-position:left center; -webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 22%, #000 52%); mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 22%, #000 52%); } /* Colour wash that ties the artwork to the page palette */ .hero-art::after{ content:''; position:absolute; inset:0; background: linear-gradient(to right, var(--bg) 0%, rgba(13,17,23,.35) 34%, transparent 62%), linear-gradient(to bottom, rgba(13,17,23,.55) 0%, transparent 26%, rgba(13,17,23,.75) 100%); } html[dir="rtl"] .hero-art{right:auto; left:0; transform:scaleX(-1);} .hero-grid-cine{position:relative; z-index:2; padding-top:64px;} /* Reading order everywhere: headline -> intro -> instrument -> Enterprise DNA -> CTAs */ .hero-copy{ max-width:620px; display:flex; flex-direction:column; } .hero-copy > .eyebrow2{order:1;} .hero-copy > h1{order:2;} .hero-copy > p.sub:nth-of-type(1){order:3;} .hero-copy > .hero-instrument{order:4;} .hero-copy > p.sub:nth-of-type(2){order:5; margin-top:26px !important;} .hero-copy > .hero-cta-row{order:6; margin-top:26px; margin-bottom:0;} .hero-cine h1{font-size:clamp(38px,5.2vw,66px); line-height:1.02; margin-bottom:22px;} .hero-cine .sub{max-width:46ch;} .hero-cine .sub b{color:var(--text); font-weight:600;} .hl-teal{color:var(--teal); font-weight:600;} a.hl-teal:hover{border-bottom:1px solid var(--teal);} /* ---------- Training instrument ---------- */ .hero-instrument{ display:flex; align-items:center; gap:34px; margin:36px 0 8px; flex-wrap:wrap; } .hero-cine .falcon-dial{position:static; width:210px; flex:none; text-align:center;} .hero-cine .falcon-dial .dial{width:210px; height:210px; position:relative;} .hero-cine .falcon-dial .dial::before{ content:''; position:absolute; inset:-8%; border-radius:50%; background:radial-gradient(circle, rgba(13,17,23,.86) 52%, transparent 76%); z-index:-1; } .hero-cine .dial-readout .cap{ font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--teal); line-height:1.5; text-align:center; margin-bottom:6px; } .hero-cine .dial-readout .val{font-size:40px; letter-spacing:-.01em; line-height:1;} .hero-cine .dial-readout .lbl{font-size:9.5px; margin-top:8px;} /* Epoch line and the illustrative note sit below the ring, so nothing collides */ .hero-cine .dial-caption{text-align:center; margin-top:12px;} .hero-cine .dial-caption .sub2{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); letter-spacing:.03em; white-space:nowrap; } .hero-cine .dial-caption .dial-illustrative{margin-top:5px; font-size:9px;} .hero-stages{list-style:none; display:flex; flex-direction:column; gap:15px; margin:0; padding:0;} .hero-stages li{display:flex; align-items:center; gap:12px; opacity:.42; transition:opacity .5s ease;} .hero-stages li.on{opacity:1;} .hero-stages .sg-mark{ width:20px; height:20px; border-radius:50%; flex:none; border:1.5px solid var(--border); position:relative; transition:border-color .4s, box-shadow .4s; } .hero-stages .sg-mark::after{ content:''; position:absolute; inset:5px; border-radius:50%; background:var(--border); transition:background .4s; } .hero-stages li.on .sg-mark{border-color:var(--teal); box-shadow:0 0 12px rgba(63,191,174,.30);} .hero-stages li.on .sg-mark::after{background:var(--teal);} .hero-stages li.now .sg-mark{border-color:var(--accent); box-shadow:0 0 14px var(--accent-glow);} .hero-stages li.now .sg-mark::after{background:var(--accent);} .hero-stages b{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); font-weight:500; } .hero-stages li.now b{color:var(--accent);} .hero-stages i{ display:block; font-style:normal; font-size:12px; color:var(--text-dim); margin-top:2px; } /* ---------- Trust strip ---------- */ .hero-trust{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border-soft); margin-top:44px; padding-top:24px; padding-bottom:34px; gap:0; } .hero-trust .ht-item{ display:flex; align-items:center; gap:13px; padding:4px 22px; border-right:1px solid var(--border-soft); } .hero-trust .ht-item:last-child{border-right:0;} .hero-trust .ht-item:first-child{padding-left:0;} .hero-trust svg{width:26px; height:26px; flex:none; stroke:var(--teal); fill:none;} .hero-trust b{display:block; font-size:14px; color:var(--text); font-weight:600; letter-spacing:.01em;} .hero-trust i{display:block; font-style:normal; font-size:12.5px; color:var(--text-dim); margin-top:2px;} @media(max-width:1100px){ .hero-art{width:58%;} .hero-trust{grid-template-columns:repeat(2,1fr); row-gap:20px;} .hero-trust .ht-item:nth-child(2){border-right:0;} .hero-trust .ht-item:nth-child(3){padding-left:0;} } /* ---------- Mobile: the artwork becomes a real banner, not a wash ---------- */ @media(max-width:820px){ .hero-cine{padding-top:0;} /* Art moves into the flow at the top of the hero, at full strength */ .hero-art{ position:relative; top:auto; right:auto; bottom:auto; width:100%; height:min(46vh, 330px); opacity:1; margin-bottom:-26px; } .hero-art img{ object-position:60% 32%; -webkit-mask-image:linear-gradient(to bottom, #000 52%, transparent 98%); mask-image:linear-gradient(to bottom, #000 52%, transparent 98%); } .hero-art::after{ background: linear-gradient(to bottom, rgba(13,17,23,.30) 0%, transparent 34%, var(--bg) 96%), linear-gradient(to right, rgba(13,17,23,.45), transparent 40%); } html[dir="rtl"] .hero-art{transform:none;} html[dir="rtl"] .hero-art img{object-position:40% 32%;} .hero-grid-cine{padding-top:10px;} .hero-copy{max-width:100%;} .hero-cine h1{font-size:clamp(32px,9.2vw,44px); margin-bottom:16px;} .hero-cine .sub{font-size:15px;} /* Instrument stays side-by-side and compact so it lands above the fold */ .hero-instrument{gap:18px; margin:26px 0 4px; flex-wrap:nowrap; align-items:center;} .hero-cine .falcon-dial, .hero-cine .falcon-dial .dial{width:148px; height:148px;} .hero-cine .dial-readout .cap{font-size:8.5px; letter-spacing:.12em;} .hero-cine .dial-readout .val{font-size:27px;} .hero-cine .dial-readout .lbl{font-size:8px; margin-top:6px;} .hero-cine .dial-caption{margin-top:9px;} .hero-cine .dial-caption .sub2{font-size:9px;} .hero-cine .dial-caption .dial-illustrative{font-size:7.5px; margin-top:3px;} .hero-stages{gap:11px; min-width:0;} .hero-stages .sg-mark{width:16px; height:16px;} .hero-stages .sg-mark::after{inset:4px;} .hero-stages b{font-size:10px; letter-spacing:.07em;} .hero-stages i{font-size:11px;} } @media(max-width:560px){ .hero-art{height:min(38vh, 270px);} } @media(max-width:560px){ .hero-trust{grid-template-columns:1fr;} .hero-trust .ht-item{border-right:0; padding-left:0;} }