/* ==========================================================
IMAGINE × AVEON DESIGN SYSTEM · v1.0
Cream-warm editorial system trasplantado de aveon.framer.website
con el contenido locked de The Imagine Group.
========================================================== */
:root{
/* Cream warm palette (from Aveon) */
--cream: #E8E0D6;
--cream-2: #E5DDD4;
--cream-lt: #F2EDE7;
--cream-xlt: #F5F0EB;
/* Dark coffee tones (from Aveon) */
--coffee: #2C2218;
--coffee-deep: #1A1512;
--coffee-2: #241D17;
--coffee-3: #3E3228;
/* Accents */
--tan: #B8845C; /* Aveon's terracotta accent */
--tan-2: #A06E45; /* darker tan */
--gold: #C5A963; /* Imagine logo gold (retained) */
--gold-lt: #E2C97E;
/* Text */
--ink: #2C2218;
--ink-mute: rgba(44,34,24,.6);
--ink-soft: rgba(44,34,24,.75);
--bone: #F2EDE7;
--bone-mute: rgba(229,221,212,.75);
/* Lines */
--line-cream: rgba(44,34,24,.18);
--line-dark: rgba(229,221,212,.16);
}
html,body{background:var(--cream);color:var(--ink)}
body{font-family:'Geist',Inter,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
/* ==== Typography ==== */
.font-display{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.04em;line-height:1}
.font-body{font-family:'Inter',sans-serif;font-weight:400}
.font-mono{font-family:'JetBrains Mono','Geist Mono',monospace;font-weight:500}
.eyebrow{font-family:'Geist',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
/* brackets removed per client request — eyebrow content renders as-is */
.eyebrow-plain{font-family:'Geist',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.h-display{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.05em;line-height:.95}
.h2-display{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.04em;line-height:1;font-size:clamp(36px,4.6vw,60px)}
.h3-display{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:clamp(24px,2.6vw,36px)}
/* ==== Top bar ==== */
.topbar{border-bottom:1px solid var(--line-cream)}
.topbar.dark{border-color:var(--line-dark);background:var(--coffee-deep);color:var(--bone)}
/* ==== Section bgs ==== */
.bg-cream {background:var(--cream)}
.bg-cream-2{background:var(--cream-2)}
.bg-cream-lt{background:var(--cream-lt)}
.bg-coffee {background:var(--coffee-deep);color:var(--bone)}
/* ==== Reveals (subtle, fade only — Aveon style) ==== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal[data-d="100"]{transition-delay:.1s}
.reveal[data-d="200"]{transition-delay:.2s}
.reveal[data-d="300"]{transition-delay:.3s}
.reveal[data-d="400"]{transition-delay:.4s}
.reveal[data-d="500"]{transition-delay:.5s}
/* ==== CTA link with arrow + bottom rule ==== */
.cta-link{display:inline-flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid currentColor;font-family:'Geist',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:gap .25s ease}
.cta-link:hover{gap:22px}
.cta-link.on-dark{color:var(--bone)}
.cta-link.on-dark:hover{color:var(--tan)}
/* ==== Primary CTA button (terracotta filled rectangle) ==== */
.btn-tan{display:inline-flex;align-items:center;gap:10px;background:var(--tan);color:var(--bone);padding:14px 22px 14px 24px;font-family:'Geist',sans-serif;font-weight:500;font-size:13px;letter-spacing:.04em;transition:background .25s ease,transform .25s ease}
.btn-tan:hover{background:var(--tan-2)}
.btn-tan .ico{display:inline-flex;width:28px;height:28px;background:var(--coffee-deep);color:var(--tan);align-items:center;justify-content:center;transition:transform .25s ease}
.btn-tan:hover .ico{transform:translateX(3px)}
/* ==== Outline CTA rectangle on cream ==== */
.btn-outline{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--coffee);color:var(--coffee);padding:12px 22px;font-family:'Geist',sans-serif;font-weight:500;font-size:12px;letter-spacing:.06em;transition:background .25s ease,color .25s ease}
.btn-outline:hover{background:var(--coffee);color:var(--bone)}
/* ==== Tag pill ==== */
.tag{display:inline-flex;align-items:center;font-family:'Geist',sans-serif;font-size:12px;color:var(--coffee)}
.tag::before{content:'•';margin-right:8px;color:var(--tan)}
.tag-dark{color:var(--bone-mute)}
.tag-dark::before{color:var(--tan)}
/* ==== Showreel image card ==== */
.showreel{position:relative;border-radius:6px;overflow:hidden;background:var(--coffee-deep)}
.showreel .showreel-tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(26,21,18,.55);backdrop-filter:blur(8px);color:var(--bone);font-family:'Geist',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px;border-radius:9999px}
.showreel .showreel-tag .play{width:14px;height:14px;border-radius:9999px;background:var(--tan);display:inline-flex;align-items:center;justify-content:center}
/* ==== Section divider ==== */
.divider{height:1px;background:var(--line-cream)}
.divider.dark{background:var(--line-dark)}
/* ==== Hover image card ==== */
.media-card{position:relative;overflow:hidden;border-radius:4px}
.media-card img{transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.media-card:hover img{transform:scale(1.04)}
/* ==== Preloader · SVG-draw intro animation ====
Sequence: (0.0s) curtain fade-in
(0.2s) circle stroke draws clockwise
(1.0s) triangle three sides draw
(1.8s) PNG logo fades in over the SVG, SVG fades out
(2.3s) PNG flies to header logo position (size + xy interpolated)
(3.5s) curtain fades out, cascade reveal kicks in on page elements */
#preloader{position:fixed;inset:0;z-index:100;background:var(--coffee-deep);transition:opacity .8s cubic-bezier(.7,0,.3,1)}
#preloader.is-hidden{opacity:0;pointer-events:none}
#preloader .pl-stage{position:fixed;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%);transition:left 1.2s cubic-bezier(.65,0,.25,1),top 1.2s cubic-bezier(.65,0,.25,1),width 1.2s cubic-bezier(.65,0,.25,1),height 1.2s cubic-bezier(.65,0,.25,1),transform 1.2s cubic-bezier(.65,0,.25,1)}
#preloader .pl-draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#preloader .pl-draw circle,
#preloader .pl-draw polygon{fill:none;stroke-linecap:round;stroke-linejoin:round}
#preloader .pl-draw circle{stroke:#C5A963;stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:600;animation:plDrawCircle 1.4s cubic-bezier(.7,0,.3,1) .25s forwards}
#preloader .pl-draw polygon{stroke:#B0B0B0;stroke-width:1.5;stroke-dasharray:540;stroke-dashoffset:540;animation:plDrawTri 1.1s cubic-bezier(.7,0,.3,1) 1.05s forwards}
#preloader .pl-draw{opacity:1;transition:opacity .55s ease}
#preloader.is-revealed .pl-draw{opacity:0}
#preloader .pl-logo{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .65s cubic-bezier(.4,0,.2,1)}
#preloader.is-revealed .pl-logo{opacity:1}
#preloader .pl-label{position:fixed;left:50%;bottom:calc(50% - 150px);transform:translateX(-50%);font-family:'Geist','Inter',sans-serif;font-weight:500;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(241,236,225,.55);margin:0;opacity:0;animation:plLabel 2s cubic-bezier(.7,0,.3,1) .35s forwards;transition:opacity .35s ease}
#preloader.is-landing .pl-label{opacity:0!important;animation:none}
@keyframes plDrawCircle{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@keyframes plDrawTri{from{stroke-dashoffset:540}to{stroke-dashoffset:0}}
@keyframes plLabel{0%{opacity:0;transform:translateX(-50%) translateY(8px)}30%,80%{opacity:.55;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-4px)}}
html.is-loading,body.is-loading{overflow:hidden}
/* Header logo stays visible — the flying preloader logo lands on top of it in the exact same spot, so the handoff is seamless. (Hiding the header logo and fading it back in caused stuck CSS transitions on ![]()
.) */
/* ==== Intro cascade — elements wait until preloader hands off ==== */
.intro-cascade{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.intro-cascade.in{opacity:1;transform:translateY(0)}
/* ==== Mega-menu desktop dropdown — categorized panels below sticky header ====
Trigger: click on a top-nav item with [data-mega]. Panel slides down from header bottom.
Only one panel open at a time. ESC or click-outside closes. Mobile uses the drawer instead. */
.nav-mega-wrap{position:relative}
.nav-mega-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;padding:0;line-height:inherit}
.nav-mega-trigger .chev{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;display:inline-block;margin-left:2px}
.nav-mega-trigger[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.nav-mega-trigger:hover{color:var(--tan)}
.nav-mega-panel{position:fixed;left:0;right:0;top:130px;z-index:35;background:var(--cream-lt);border-top:1px solid var(--line-cream);border-bottom:1px solid var(--line-cream);box-shadow:0 18px 40px -16px rgba(26,21,18,.18);opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);max-height:calc(100vh - 130px);overflow-y:auto;padding-top:25px}
.nav-mega-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-mega-inner{max-width:1440px;margin:0 auto;padding:48px 40px 56px;display:grid;grid-template-columns:220px 1fr;gap:60px}
.nav-mega-heading{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.03em;font-size:30px;line-height:1.05;color:var(--coffee)}
.nav-mega-heading em{font-family:'Inter',sans-serif;font-style:italic;font-weight:700;letter-spacing:-.04em}
.nav-mega-blurb{font-family:'Inter',sans-serif;font-size:13px;line-height:1.55;color:var(--ink-soft);margin-top:14px;max-width:200px}
.nav-mega-eyebrow{font-family:'Geist',sans-serif;font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:18px}
.nav-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
.nav-mega-item{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:13px 16px 13px 14px;border-left:2px solid transparent;color:var(--coffee);transition:border-color .2s ease,background-color .2s ease,padding-left .2s ease;text-decoration:none;align-items:start}
.nav-mega-item:hover{border-left-color:var(--tan);background:rgba(184,132,92,.06);padding-left:18px}
.nav-mega-item .mega-ico{width:24px;height:24px;color:var(--tan);flex-shrink:0;padding-top:2px;display:block}
.nav-mega-item .mega-ico svg{width:24px;height:24px;display:block;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nav-mega-item .mega-text{display:flex;flex-direction:column;min-width:0}
.nav-mega-item .title{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.015em;color:var(--coffee);line-height:1.25}
.nav-mega-item .desc{display:block;font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.45;margin-top:4px}
.nav-mega-footer{grid-column:1 / -1;border-top:1px solid var(--line-cream);margin-top:32px;padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.nav-mega-footer .left{font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-mute)}
.nav-mega-footer .right{font-family:'Geist',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--coffee);display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-bottom:1px solid var(--coffee);padding-bottom:4px;transition:color .2s,border-color .2s}
.nav-mega-footer .right:hover{color:var(--tan);border-color:var(--tan)}
/* ==== Hero glass-base — readability when a WebGL bg sits behind heading text ==== */
.hero-glass{position:relative;display:inline-block;padding:24px 32px 28px;border-radius:6px;backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08);background:rgba(255,255,255,.04);box-shadow:0 14px 36px -14px rgba(0,0,0,.22);max-width:100%;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease}
.hero-glass.on-dark{background:rgba(26,21,18,.34);border:1px solid rgba(255,255,255,.06)}
.hero-glass.on-cream{background:rgba(245,237,224,.55);border:1px solid rgba(26,21,18,.04)}
/* Invisible state — keeps padding/layout but nullifies the glass surface (used on the hero idle frame where the landscape reads cleanly on its own). */
.hero-glass.is-invisible{background:transparent !important;border-color:transparent !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
.hero-glass.on-dark{background:rgba(26,21,18,.78)}
.hero-glass.on-cream{background:rgba(245,237,224,.88)}
}
@media (max-width: 640px){
.hero-glass{padding:18px 22px 22px;display:block}
}
/* When ANY mega-panel is open, dim the page underneath */
.nav-mega-backdrop{position:fixed;inset:0;top:130px;z-index:34;background:rgba(26,21,18,.35);opacity:0;pointer-events:none;transition:opacity .28s ease}
.nav-mega-backdrop.on{opacity:1;pointer-events:auto}
@media (max-width: 1023px){
.nav-mega-panel,.nav-mega-backdrop{display:none}
}
/* ==== Hero scrub title — bottom-aligned on final chapter ("Three ways to begin.")
so the headline sits BELOW the three icons in the frame instead of crossing them.
align-items toggled via class; padding-bottom is animated from JS (setInterval-based
so it works in preview/headless and in real browsers identically). ==== */
#scrubTitleWrap.scrub-bottom{align-items:flex-end}
/* ==== Hero bridge background — applied to the sticky parent so it loads via CSS
(most reliable path for above-the-fold images on iOS Safari + Brave + Android).
The redundant ![]()
inside #idleStill is still there for SEO / a11y fallback. ==== */
.hero-bridge-bg{
background-image:url('../hero-scrub/hero-bridge.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
@media (max-width: 767px){
.hero-bridge-bg{background-image:url('../hero-scrub/hero-bridge-mobile.jpg')}
}
/* ==== Idle bridge still — subtle panel lights overlay (image itself is an ![]()
in HTML) ==== */
.idle-light{position:absolute;pointer-events:none;mix-blend-mode:screen}
.idle-led{width:6px;height:6px;border-radius:50%;background:#FFB46B;box-shadow:0 0 10px 3px rgba(255,180,107,.55),0 0 4px 1px rgba(255,180,107,.85);animation:idleLed 2.6s ease-in-out infinite}
.idle-radar{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,rgba(110,200,255,.85) 0%,rgba(74,158,255,.35) 60%,transparent 100%);box-shadow:0 0 12px 4px rgba(74,158,255,.45);animation:idleRadar 3.4s ease-in-out infinite}
.idle-strip{width:30px;height:8px;background:linear-gradient(90deg,rgba(255,180,107,0) 0%,rgba(255,180,107,.85) 50%,rgba(255,180,107,0) 100%);box-shadow:0 0 12px 4px rgba(255,180,107,.4);border-radius:2px;animation:idleStrip 3.8s ease-in-out infinite}
@keyframes idleLed{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@keyframes idleRadar{0%,100%{opacity:.85;transform:scale(1)}40%{opacity:.55;transform:scale(.92)}70%{opacity:1;transform:scale(1.08)}}
@keyframes idleStrip{0%,100%{opacity:.85}30%{opacity:.55}65%{opacity:1}}
/* ==== Auto entrance: fade-up applied to any element with .fade-up class ==== */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.fade-up.in{opacity:1 !important;transform:translateY(0) !important}
.fade-up[data-d="1"]{transition-delay:80ms}
.fade-up[data-d="2"]{transition-delay:160ms}
.fade-up[data-d="3"]{transition-delay:240ms}
.fade-up[data-d="4"]{transition-delay:320ms}
.fade-up[data-d="5"]{transition-delay:400ms}
/* ==== Gallery card sequential fade-in from below ==== */
.gallery-card{opacity:0;transform:translateY(70px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.gallery-card.in{opacity:1 !important;transform:translateY(0) !important}
.gallery-card[data-i="0"]{transition-delay:0ms}
.gallery-card[data-i="1"]{transition-delay:150ms}
.gallery-card[data-i="2"]{transition-delay:300ms}
.gallery-card[data-i="3"]{transition-delay:450ms}
.gallery-card[data-i="4"]{transition-delay:600ms}
/* ==== Vertical parallax (scroll-driven, JS-controlled) ==== */
.parallax-img{will-change:transform;transform:translate3d(0,0,0) scale(1.18);transform-origin:center center;transition:none !important}
.parallax-img:hover{transform:translate3d(0,0,0) scale(1.18) !important}
/* ==== Nav drawer (hamburger on all viewports) ==== */
#mobileMenu.mobile-menu{display:none;background-color:rgba(10,8,7,.5)}
#mobileMenu.mobile-menu.open{display:block}
.mobile-menu-panel{transform:translateX(-100%);transition:transform .35s cubic-bezier(.2,.7,.3,1);width:100%}
@media(min-width:768px){
.mobile-menu-panel{max-width:480px;box-shadow:8px 0 40px rgba(0,0,0,.25)}
}
#mobileMenu.mobile-menu.open .mobile-menu-panel{transform:translateX(0)}
/* ==== Selection ==== */
::selection{background:var(--tan);color:var(--bone)}
/* ==== Reduced motion ==== */
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1;transform:none;transition:none}
}
/* ==== DecryptedText effect ==== */
.decrypt{display:inline-block;font-variant-ligatures:none}
.decrypt.is-encrypting{color:var(--tan);opacity:.85;transition:color .25s ease,opacity .25s ease}
.decrypt.is-done{color:inherit;opacity:1}
/* ==== Clock blink (live time in top bar) ==== */
.clock-dot{display:inline-block;width:6px;height:6px;border-radius:9999px;background:var(--tan);margin-right:6px;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
/* ==== Masonry-ish (CSS grid columns) ==== */
.masonry{column-count:1;column-gap:8px}
@media(min-width:640px){.masonry{column-count:2}}
@media(min-width:1024px){.masonry{column-count:3}}
@media(min-width:1280px){.masonry{column-count:5}}
.masonry > *{break-inside:avoid;margin-bottom:8px}
/* ==== Geist font fallback (CDN load) ==== */
/* Loaded via from Vercel CDN; fallback to system fonts if blocked */