/* ============================================================ THE DREAM STATE — Methodology Immersive, scroll-driven, futuristic. Background reacts per section. Themes set --m-accent / --m-glow on . ============================================================ */ :root{ --m-accent:#D4AF37; --m-glow:#57156E; --m-accent-soft:rgba(212,175,55,.5); } /* ---------- Fixed background system ---------- */ #m-net{ position:fixed; inset:0; z-index:0; pointer-events:none; } .m-aura{ position:fixed; inset:0; z-index:0; pointer-events:none; transition:background 1.1s ease; background: radial-gradient(50vw 50vw at 18% 12%, color-mix(in srgb, var(--m-glow) 60%, transparent), transparent 60%), radial-gradient(46vw 46vw at 86% 78%, color-mix(in srgb, var(--m-glow) 42%, transparent), transparent 62%), radial-gradient(40vw 40vw at 70% 8%, color-mix(in srgb, var(--m-accent) 10%, transparent), transparent 60%); } .m-scan{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(180deg, rgba(212,175,55,.025) 0 1px, transparent 1px 4px); mix-blend-mode:screen; } .m-motifs{ position:fixed; inset:0; z-index:0; pointer-events:none; } .m-motif{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 1.1s ease; } .m-motif.on{ opacity:.5; } .m-motif svg{ width:min(120vh,120vw); height:auto; max-width:none; } /* HUD vignette + corner ticks on the whole viewport */ .m-frame{ position:fixed; inset:14px; z-index:1; pointer-events:none; border:1px solid rgba(212,175,55,.08); border-radius:10px; } .m-frame::before,.m-frame::after{ content:""; position:absolute; width:22px; height:22px; border:1.5px solid var(--m-accent-soft); } .m-frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; } .m-frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; } /* ---------- Progress rail ---------- */ .m-rail{ position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:30; display:none; flex-direction:column; gap:16px; } @media(min-width:1100px){ .m-rail{ display:flex; } } .m-rail a{ display:flex; align-items:center; gap:11px; justify-content:flex-end; text-decoration:none; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-2); transition:.3s; } .m-rail a .rl{ opacity:0; transform:translateX(6px); transition:.3s; } .m-rail a:hover .rl, .m-rail a.active .rl{ opacity:1; transform:none; } .m-rail a:hover{ color:var(--cream); } .m-rail a .rd{ width:9px; height:9px; border-radius:50%; border:1px solid var(--line); transition:.3s; flex:0 0 auto; } .m-rail a.active{ color:var(--m-accent); } .m-rail a.active .rd{ background:var(--m-accent); border-color:var(--m-accent); box-shadow:0 0 12px var(--m-accent); transform:scale(1.15); } /* ---------- Hero ---------- */ .m-hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:7rem 0 4rem; } .m-hero .tagchip{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--m-accent); border:1px solid var(--line); border-radius:100px; padding:.5em 1em; background:rgba(212,175,55,.05); } .m-hero h1{ font-size:clamp(2.8rem,7vw,6rem); margin:1.4rem 0 0; } .m-hero .sub{ max-width:54ch; margin-top:1.6rem; color:var(--cream); font-size:clamp(1.05rem,1.6vw,1.35rem); } .m-hero-grid{ display:grid; gap:var(--s-5); align-items:center; } @media(min-width:980px){ .m-hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--s-7); } } .scroll-cue{ margin-top:var(--s-5); display:inline-flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist-2); } .scroll-cue .ln{ width:46px; height:1px; background:linear-gradient(90deg,var(--m-accent),transparent); position:relative; overflow:hidden; } .scroll-cue .ln::after{ content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; background:var(--m-accent); animation:cueRun 2.2s linear infinite; } @keyframes cueRun{ to{ left:120%; } } /* ---------- HUD graphic frame ---------- */ .hud{ position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:linear-gradient(160deg, color-mix(in srgb,var(--m-glow) 26%, #0c0810), #0a070e); box-shadow:0 40px 90px -40px rgba(0,0,0,.8); } .hud::before{ content:attr(data-tag); position:absolute; top:12px; left:14px; z-index:3; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--m-accent); opacity:.9; } .hud .hud-dot{ position:absolute; top:14px; right:14px; z-index:3; width:8px; height:8px; border-radius:50%; background:var(--m-accent); box-shadow:0 0 10px var(--m-accent); animation:pulse 2s infinite; } .hud svg{ width:100%; height:auto; display:block; } .hud .corner{ position:absolute; width:16px; height:16px; border:1.4px solid var(--m-accent-soft); z-index:3; } .hud .corner.tl{ top:8px; left:8px; border-right:0; border-bottom:0; } .hud .corner.br{ bottom:8px; right:8px; border-left:0; border-top:0; } /* ---------- Pillar panels ---------- */ .mpanel{ position:relative; min-height:92svh; display:flex; align-items:center; padding:5rem 0; } .mpanel .grid2{ display:grid; gap:var(--s-5); align-items:center; width:100%; } @media(min-width:980px){ .mpanel .grid2{ grid-template-columns:1fr 1fr; gap:var(--s-7); } .mpanel.rev .copy{ order:2; } } .m-eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--m-accent); margin-bottom:1.1rem; } .m-eyebrow .pn{ font-size:1.1rem; color:var(--m-accent); } .m-eyebrow::before{ content:""; width:30px; height:1px; background:var(--m-accent); opacity:.7; } .mpanel h2{ font-size:clamp(1.9rem,3.6vw,3rem); } .mpanel .produces{ margin-top:1.6rem; border-left:2px solid var(--m-accent); padding-left:1.1rem; } .mpanel .produces .lb{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--m-accent); } .mpanel .produces p{ margin:.3rem 0 0; color:var(--cream); } .reserved-chip{ display:inline-flex; align-items:center; gap:.5em; margin-top:1.4rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-2); border:1px dashed var(--line); border-radius:100px; padding:.5em 1em; } .reserved-chip .lk{ color:var(--m-accent); } /* ---------- The Vault (reserved) ---------- */ .vault{ position:relative; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:linear-gradient(160deg, color-mix(in srgb,var(--m-glow) 22%, #0b0810), #08060c); padding:clamp(2rem,5vw,4rem); } .vault::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(212,175,55,.03) 0 1px, transparent 1px 5px); pointer-events:none; } .redacted{ font-family:var(--mono); color:var(--mist); line-height:2; font-size:.95rem; } .redacted .blk{ display:inline-block; height:.9em; vertical-align:middle; border-radius:3px; margin:0 .15em; background:linear-gradient(90deg, rgba(212,175,55,.32), rgba(122,30,156,.4)); filter:blur(.3px); } .vault .lockrow{ display:flex; align-items:center; gap:14px; margin-bottom:1.4rem; } .vault .lockrow .ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--m-accent-soft); color:var(--m-accent); font-size:1.3rem; background:rgba(212,175,55,.06); } /* ---------- Reveal (slide + clip) ---------- */ .mrise{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); } .mrise.in{ opacity:1; transform:none; } .mrise.d1{ transition-delay:.1s } .mrise.d2{ transition-delay:.2s } .mrise.d3{ transition-delay:.3s } .hud.mrise{ transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); } @media (prefers-reduced-motion: reduce){ .mrise{ opacity:1; transform:none; } .scroll-cue .ln::after{ animation:none; } }