/* ============================================================ ARCANE SYNTHESIS · Design Tokens Source: DESIGN.md + PRD.md ============================================================ */ :root { /* Surfaces */ --surface: #091609; --surface-dim: #051105; --surface-bright: #2e3d2d; --surface-container: #152315; --surface-container-high: #1f2d1f; --surface-container-highest: #2a3829; /* Text */ --on-surface: #d6e7d1; --on-surface-variant: #d4c3bd; --on-surface-muted: rgba(214, 231, 209, 0.55); /* Brand accents */ --primary: #e5beae; --on-primary: #432b1f; --primary-container: #2b160c; --gold: #c2a46b; --gold-dim: rgba(194, 164, 107, 0.35); /* Arcane purple — the 4th accent. Reads instantly as magic / AI, completing the elemental legend: green = growth · gold = knowledge · blue = cosmos · purple = magic/AI Reserved for the Arcane Core, AI-flavoured elements and special FX. */ --arcane: #8B5CF6; --arcane-bright: #A855F7; --arcane-deep: #6D28D9; --ochre: #ae8452; --rust: #a13e1e; --burgundy: #831b1a; --tertiary: #eebe87; --secondary: #afcdc1; --secondary-container: #314c43; /* Tolkien forged-metal palette — drives the hero-lede manifesto engraving (.hero__lede). Each token mirrors the brief: --metal-dark base / shadow of the inscription --bronze-old bronze antigo midtone --gold-aged ouro envelhecido sheen --ember-amber âmbar vulcânico ember-1 core --ember-magma laranja magma ember-2 core --ember-incand vermelho incandescente tail --gold-burning dourado ardente inner light / hover Available globally so future Tolkien accents can reuse them. */ --metal-dark: #2B2017; --bronze-old: #6A4A2C; --gold-aged: #C9A15F; --ember-amber: #E08A2E; --ember-magma: #D9651A; --ember-incand: #A63B1E; --gold-burning: #F2C879; /* Glass */ --glass-bg: rgba(15, 42, 34, 0.45); --glass-border: rgba(194, 164, 107, 0.18); --glass-blur: 20px; /* Typography ── Global typographic system ──────────────────────────────── --font-display → titles & subtitles (Cinzel, all-caps Roman serif) --font-body → paragraphs, buttons, card content (Inter) --font-mono → terminal-style labels / eyebrows (JetBrains Mono) --font-tengwar → the One Ring inscription around the portrait NOTE — The Merlin scope, the Codex do Arquiteto scope, and the Codex dos Contratos Arcanos scope each keep their bespoke manuscript fonts (Cormorant Garamond, Libre Caslon Text) by declaring font-family explicitly, so the variable swap below never reaches them. */ --font-display: "Cinzel", "Libre Caslon Text", Georgia, serif; --font-body: "Inter", "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; --font-tengwar: "Tengwar Annatar", "Libre Caslon Text", serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --container-max: 1200px; --margin-safe: 24px; /* Radii (shape lock: sharp architectural) */ --radius-sm: 0.125rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-full: 9999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.2s; --duration-med: 0.45s; --duration-slow: 0.9s; /* Z-index scale */ --z-bg: 0; --z-content: 10; --z-nav: 100; --z-merlin: 200; --z-grain: 60; /* Ambient right-rail artefact (Domínios em Expansão). Sits above content/grain but below nav and Merlin so it never competes with the focal UI — it is a quiet companion, not a widget. */ --z-domains: 80; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Root-level horizontal clip. is the element that actually scrolls, so this is what stops sideways scrolling on mobile. Several decorative glows (.craft__*-aura, .relic-card__aura) use negative insets and bleed a few px past the viewport edge by design; clipping here keeps those bleeds purely cosmetic instead of producing a horizontal scrollbar. Paired with body's existing overflow-x:hidden. */ overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--on-surface); background: #040810; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } /* ============================================================ ATMOSPHERIC BACKGROUND ============================================================ */ .bg-vault { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; } .bg-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(15, 42, 34, 0.7) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(43, 22, 12, 0.5) 0%, transparent 60%), linear-gradient(180deg, #051105 0%, #091609 40%, #0a0d0c 100%); } .bg-godrays { position: absolute; inset: 0; background: conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(194, 164, 107, 0.04) 30deg, transparent 60deg), conic-gradient(from 160deg at 30% -5%, transparent 0deg, rgba(175, 205, 193, 0.03) 20deg, transparent 50deg); animation: godray-drift 18s ease-in-out infinite alternate; } @keyframes godray-drift { from { opacity: 0.6; transform: scale(1); } to { opacity: 1; transform: scale(1.04) rotate(1deg); } } .bg-dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; } .bg-grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: 0.875rem var(--margin-safe); max-height: 72px; background: rgba(15, 42, 34, 0.45); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); transition: background var(--duration-med) var(--ease-out); } /* Scrolled state — toggled by effects.js once the 60px threshold is crossed (no per-frame inline-style writes). */ .nav.is-scrolled { background: rgba(15, 42, 34, 0.82); } .nav__brand { display: flex; align-items: center; gap: 0.625rem; } .nav__sigil { color: var(--gold); flex-shrink: 0; display: flex; align-items: center; } .nav__logo { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(194, 164, 107, 0.4)); } .nav__wordmark { display: flex; flex-direction: column; gap: 0.1rem; } .nav__wordmark-name { font-family: var(--font-display); font-size: 0.95rem; color: var(--primary); line-height: 1.1; } .nav__wordmark-meta { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-muted); } .nav__links { display: none; gap: 2rem; } .nav__links a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); transition: color var(--duration-fast); position: relative; } .nav__links a::after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--duration-med) var(--ease-out); } .nav__links a:hover, .nav__links a:focus-visible { color: var(--gold); } .nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); } .nav__tools { display: flex; align-items: center; gap: 0.5rem; position: relative; } /* MOBILE MENU TRIGGER — hidden on desktop (the inline .nav__links show instead). A bronze-edged chip matching the .tool buttons, with an animated hamburger that folds into an ✕ when the panel is open. */ .nav__burger { display: none; width: 38px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: transparent; color: var(--on-surface-variant); cursor: pointer; transition: border-color var(--duration-fast), color var(--duration-fast); } .nav__burger:hover, .nav__burger:focus-visible { border-color: var(--gold-dim); color: var(--gold); outline: none; } .nav__burger-bars, .nav__burger-bars::before, .nav__burger-bars::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s var(--ease-out), background 0.2s linear; } .nav__burger-bars { position: relative; } .nav__burger-bars::before { position: absolute; left: 0; top: -6px; } .nav__burger-bars::after { position: absolute; left: 0; top: 6px; } .nav__burger[aria-expanded="true"] .nav__burger-bars { background: transparent; } .nav__burger[aria-expanded="true"] .nav__burger-bars::before { transform: translateY(6px) rotate(45deg); } .nav__burger[aria-expanded="true"] .nav__burger-bars::after { transform: translateY(-6px) rotate(-45deg); } .tool { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.6rem; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--on-surface-variant); transition: border-color var(--duration-fast), color var(--duration-fast); } .tool:hover, .tool:focus-visible { border-color: var(--gold-dim); color: var(--gold); outline: none; } .tool[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); } .tool[aria-pressed="true"] .audio-wave { opacity: 1 !important; } /* Audio toggle: pulsing waves while playing */ #audio-toggle.is-playing .audio-wave { animation: audio-wave-pulse 1.6s ease-in-out infinite; opacity: 0.9 !important; } #audio-toggle.is-playing .audio-wave:last-of-type { animation-delay: 0.4s; } #audio-toggle.is-playing svg { filter: drop-shadow(0 0 6px rgba(229, 190, 174, 0.7)); } @keyframes audio-wave-pulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(0.5px); } } /* Theme toggle: sun/moon icon swap with smooth crossfade */ #theme-toggle { position: relative; width: 32px; height: 28px; padding: 0; display: grid; place-items: center; overflow: hidden; } #theme-toggle .theme-toggle__icon { position: absolute; top: 50%; left: 50%; transform-origin: center; transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s ease; } #theme-toggle .theme-toggle__icon--moon { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } #theme-toggle .theme-toggle__icon--sun { transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); opacity: 0; } #theme-toggle[aria-pressed="true"] .theme-toggle__icon--moon { transform: translate(-50%, -50%) rotate(90deg) scale(0.4); opacity: 0; } #theme-toggle[aria-pressed="true"] .theme-toggle__icon--sun { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } #theme-toggle:hover svg { filter: drop-shadow(0 0 6px rgba(229, 190, 174, 0.55)); } .lang-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 130px; background: var(--surface-container-high); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--duration-fast), transform var(--duration-fast); } .lang-menu.is-open { opacity: 1; pointer-events: all; transform: translateY(0); } .lang-menu li { padding: 0.55rem 0.875rem; font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; transition: background var(--duration-fast); } .lang-menu li:hover, .lang-menu li[aria-selected="true"] { background: var(--surface-container-highest); color: var(--gold); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); transition: transform var(--duration-fast), box-shadow var(--duration-med), border-color var(--duration-fast); white-space: nowrap; } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--primary-container); color: var(--primary); border: 1px solid var(--ochre); position: relative; overflow: hidden; } .btn--primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(194, 164, 107, 0.25) 0%, transparent 70%); opacity: 0; transition: opacity var(--duration-med); } .btn--primary:hover::before, .btn--primary:focus-visible::before { opacity: 1; } .btn--primary:hover, .btn--primary:focus-visible { border-color: var(--gold); box-shadow: 0 0 24px rgba(194, 164, 107, 0.2); outline: none; } .btn--ghost { color: var(--on-surface-variant); border: 1px solid transparent; } .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--gold); border-color: var(--glass-border); outline: none; } /* ============================================================ SECTION HEADERS ============================================================ */ .section-head { max-width: 680px; margin-bottom: var(--space-lg); } .section-head--center { text-align: center; margin-left: auto; margin-right: auto; } .section-head__eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-sm); } .section-head__title { font-family: var(--font-display); /* Refined June 2026 — reduced ~18% for a more elegant, less headline-like scale across every section. */ font-size: clamp(1.65rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.18; color: var(--primary); margin-bottom: var(--space-sm); } .section-head__lede { font-size: 1rem; color: var(--on-surface-variant); line-height: 1.62; max-width: 58ch; } .section-head--center .section-head__lede { margin-left: auto; margin-right: auto; } /* ============================================================ HERO · Compact character profile panel ---------------------------------------------------------------- Layout refactor (visual hierarchy): 1. Arcane Tree (background wallpaper) — primary focus 2. Memory Crystals — secondary focus 3. Welcome Message (temporary) — centred greeting 4. Hero Profile — supporting; lives in the UPPER-LEFT of the first viewport so it doesn't compete with the tree, the crystals or the welcome message. The .hero
still anchors the first viewport (min-height 100dvh) but its content is squeezed into a narrow upper-left column. The right side of the grid is intentionally empty so the tree breathes and the welcome message has room to materialize. Typography (font family / weight / style / colors / animations) is preserved; only sizes, spacing and alignment changed to make the panel feel compact and intentional. ============================================================ */ .hero { position: relative; z-index: var(--z-content); min-height: 100dvh; display: grid; /* Left column hosts the panel; right column stays empty so the tree + welcome can breathe. Widened to fit the enlarged portrait (~420px) and the original 52ch lede comfortably. */ grid-template-columns: minmax(440px, 780px) 1fr; align-items: start; padding: clamp(4.5rem, 7vh, 6.5rem) var(--margin-safe) var(--space-md); text-align: left; } .hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); max-width: 780px; width: 100%; } /* ONE RING + Portrait combined: the ring is the photo's frame. Slightly bumped beyond the original size at the user's request. All child elements — frame, glow, rune-ring, fire — scale proportionally via their percentage-based insets. */ .hero__portrait { position: relative; width: min(420px, 84vw); height: min(420px, 84vw); margin: 0; display: flex; align-items: center; justify-content: center; } .hero__rune-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ring-rotate 60s linear infinite; pointer-events: none; /* Promote to its own GPU layer so the continuous rotation reuses a cached raster of the SVG/Tengwar text instead of re-rasterising the vector glyphs every frame (cause of the subtle ring stutter). */ will-change: transform; transform: translateZ(0); backface-visibility: hidden; } @keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero__rune-text { fill: var(--gold); font-family: var(--font-tengwar); /* Brighter living inscription — the ring's engraving now glows. */ fill-opacity: 0.95; filter: drop-shadow(0 0 4px rgba(242, 200, 121, 0.6)); } .hero__rune-fire { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(161, 62, 30, 0.17) 0%, rgba(194, 164, 107, 0.06) 35%, transparent 75%); animation: fire-pulse 3s ease-in-out infinite alternate; pointer-events: none; will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; } @keyframes fire-pulse { from { opacity: 0.5; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } } .hero__portrait-frame { position: relative; width: 50%; height: 50%; border-radius: 50%; overflow: hidden; /* Frame dialed back ~18% (size + golden glow) so the portrait yields focus to the living constellation behind it — the tree, not the face, is now the star of the scene. */ border: 2px solid rgba(194, 164, 107, 0.48); box-shadow: 0 0 0 1.5px rgba(229, 190, 174, 0.16), 0 0 26px rgba(194, 164, 107, 0.12), inset 0 0 30px rgba(0, 0, 0, 0.6); z-index: 2; } .hero__portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .hero__portrait-glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(229, 190, 174, 0.26) 0%, transparent 65%); z-index: 1; animation: portrait-glow 4s ease-in-out infinite alternate; pointer-events: none; } @keyframes portrait-glow { from { opacity: 0.6; } to { opacity: 1; } } .hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); width: 100%; } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .hero__name { font-family: var(--font-display); /* Dialed back further (June 2026 refinement, ~15%) so the name reads as an elegant title rather than a modern headline. */ font-size: clamp(2.1rem, 6vw, 3.35rem); font-weight: 400; /* Tightened (June 2026): user asked for "Vaz" to sit closer to "Carlos". 0.92 collapses the visual gap to barely a hairline while still leaving room for the italic descenders + glow halo configured on the line-padding below. */ line-height: 0.92; color: var(--primary); } .hero__name-first { display: block; } .hero__name-last { display: block; font-style: italic; color: var(--tertiary); } .hero__tagline { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } /* ───────────────────────────────────────────────────────────── HERO LEDE · Tolkien-inspired forged-metal manifesto ───────────────────────────────────────────────────────────── The developer manifesto sits directly below the H1 "Carlos Vaz" and reads as an inscription on an old artefact of Middle-earth. Three stacked background layers compose the engraving: 1 · LINEAR (metal sheen) dark metal → bronze → aged gold → bronze → dark metal a slow horizontal pan suggests polished light gliding across the metal surface. 2 · RADIAL · ember-1 (warm dourado-ardente patch on the left) travels slowly RIGHT. 3 · RADIAL · ember-2 (cooler laranja-magma patch on the right) travels slowly LEFT — counter-phase from ember-1, so the two heat sources are never aligned (no pulse). The base palette comes straight from the brief: #2B2017 metal escuro ── shadow / base #6A4A2C bronze antigo ── midtone #C9A15F ouro envelhecido ── highlight #E08A2E âmbar vulcânico ── ember-1 core #D9651A laranja magma ── ember-2 core #A63B1E vermelho incand. ── ember-2 tail #F2C879 dourado ardente ── inner light / hover Engraved appearance is reinforced by a hairline dark text- shadow underneath the warm halo, simulating the inked side of the chiselled letter. drop-shadow paints the heat halo OUTSIDE the clipped glyphs without bleeding into the rest of the page. ───────────────────────────────────────────────────────────── */ .hero__lede { position: relative; z-index: 1; font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0.035em; /* slightly wider — engraved feel */ max-width: 56ch; margin: 0; background: /* Ember 1 · warm dourado-ardente patch, slides left → right */ radial-gradient(ellipse 38% 140% at 20% 50%, rgba(242, 200, 121, 0.55) 0%, rgba(224, 138, 46, 0.28) 38%, transparent 72%), /* Ember 2 · cooler laranja-magma patch, slides right → left */ radial-gradient(ellipse 34% 130% at 80% 50%, rgba(217, 101, 26, 0.45) 0%, rgba(166, 59, 30, 0.22) 42%, transparent 75%), /* Metal sheen · dark → bronze → aged-gold → bronze → dark */ linear-gradient(96deg, #2B2017 0%, #6A4A2C 22%, #C9A15F 50%, #6A4A2C 78%, #2B2017 100%); background-size: 260% 240%, 240% 220%, 220% 100%; background-position: 0% 50%, 100% 50%, 0% 50%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* The warm halo — soft amber leaking from the inscription (text-shadow paints behind transparent text, so it becomes the heat that the metal radiates). The thin black layer at +0/+1px is the chisel shadow, anchoring the glyphs in place. */ text-shadow: 0 0 18px rgba(242, 200, 121, 0.12), 0 0 32px rgba(217, 101, 26, 0.08), 0 1px 0 rgba(0, 0, 0, 0.55); filter: drop-shadow(0 0 5px rgba(217, 101, 26, 0.10)); animation: hero-lede-forge 11s ease-in-out infinite; will-change: background-position; transition: filter 0.6s ease, text-shadow 0.6s ease; } /* FORGE BREATH · the embers breathe across the engraving. Both radial gradients drift to their opposite end of the text while the metal sheen pans gently — the layers never realign, so the line never pulses; it just glows differently as you look at it. 11s cycle keeps the motion ambient (8–12s window prescribed by the brief). */ @keyframes hero-lede-forge { 0%, 100% { background-position: 0% 50%, 100% 50%, 0% 50%; } 50% { background-position: 100% 50%, 0% 50%, 100% 50%; } } /* HOVER · the inscription warms gently — no scale, no particles, no explosion. Halo widens and a touch of dourado-ardente strengthens through the drop-shadow. */ .hero__lede:hover { filter: drop-shadow(0 0 11px rgba(242, 200, 121, 0.24)); text-shadow: 0 0 22px rgba(242, 200, 121, 0.22), 0 0 38px rgba(224, 138, 46, 0.14), 0 1px 0 rgba(0, 0, 0, 0.55); } /* Honour the user's reduced-motion preference: freeze the embers at the middle of the cycle so the inscription stays readable and warm, but never moves. */ @media (prefers-reduced-motion: reduce) { .hero__lede { animation: none; background-position: 50% 50%, 50% 50%, 50% 50%; } } /* HERO ACTIONS · two in-page CTAs that bridge the visitor into Act II ("Explorar Árvore" → #knowledge) and the memory crystals ("Ver Cristais" → #memories). They are deliberately not card- shaped — they read as ritual invitations rather than UI buttons: · primary · gold-bronze ink on a parchment wash, hairline bronze border, slight inner glow that brightens on hover (the "open the gate" feel) · ghost · pure outline in muted gold, fills softly on hover Both share the same hairline geometry so the pair feels like a matched set carved from the same metal. */ .hero__actions { display: inline-flex; flex-wrap: wrap; gap: 0.65rem 0.85rem; margin-top: 1.25rem; align-items: center; /* CTAs stay visible at all times — they must not participate in the delayed act1-fade-up (3.65s) which snaps opacity to 0 when the keyframe starts while the visitor is still scrolling the hero. */ opacity: 1; transform: none; } .hero__cta { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.62rem 1.1rem; border-radius: 999px; font-family: var(--font-body); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color 0.45s ease, border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease, transform 0.35s var(--ease-out, cubic-bezier(.16,1,.3,1)); isolation: isolate; } .hero__cta:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 231, 160, 0.55), 0 0 24px rgba(255, 231, 160, 0.32); } .hero__cta-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.92; transition: transform 0.45s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity 0.35s ease; } .hero__cta-label { position: relative; } /* PRIMARY — the headline action. Reads like an inked seal: a warm parchment gradient with a hairline antique-gold ring and a whisper of inner glow. On hover it brightens (without becoming garish) and rises 1px to suggest the seal lifting off the page. */ .hero__cta--primary { color: #2A1808; /* Dominant headline action — still leads, but refined (June 2026): slimmer footprint and a quieter aura so it reads like an inked seal, not an oversized modern button. */ padding: 0.66rem 1.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; background: linear-gradient(160deg, rgba(244, 221, 192, 0.96) 0%, rgba(229, 190, 174, 0.92) 50%, rgba(194, 164, 107, 0.92) 100%); border: 1px solid rgba(120, 80, 40, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 245, 220, 0.45), inset 0 -2px 8px rgba(120, 80, 40, 0.18), 0 6px 18px rgba(0, 0, 0, 0.36), 0 0 14px rgba(255, 231, 160, 0.12); } /* Breathing attention halo behind the primary CTA. */ .hero__cta--primary::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; background: radial-gradient(ellipse at center, rgba(255, 231, 160, 0.4), transparent 70%); opacity: 0; animation: hero-cta-breathe 3.6s ease-in-out infinite; pointer-events: none; } @keyframes hero-cta-breathe { 0%, 100% { opacity: 0.16; transform: scale(0.98); } 50% { opacity: 0.4; transform: scale(1.04); } } .hero__cta--primary:hover { transform: translateY(-1px); background: linear-gradient(160deg, rgba(255, 240, 210, 0.98) 0%, rgba(244, 221, 192, 0.95) 50%, rgba(216, 174, 99, 0.95) 100%); box-shadow: inset 0 0 0 1px rgba(255, 245, 220, 0.55), inset 0 -2px 8px rgba(120, 80, 40, 0.18), 0 9px 24px rgba(0, 0, 0, 0.42), 0 0 22px rgba(255, 231, 160, 0.28); } .hero__cta--primary:hover .hero__cta-icon { transform: translateY(-1px); } /* GHOST — the secondary, quieter invitation. Pure outline in muted gold over the live wallpaper, with a soft glass fill that warms on hover. Stays legible against the busy background without ever feeling like a button. */ .hero__cta--ghost { /* Secondary CTA — stays subordinate to the gold seal (smaller, lighter type), but now carries a cool CRYSTALLINE glow so it unmistakably reads as a button. The aura is teal/cyan — the colour of the Memory Crystals — to set it apart from the warm-gold primary while it gently breathes (see ::after). */ color: #CFEFEA; padding: 0.52rem 0.95rem; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; opacity: 0.96; background: linear-gradient(160deg, rgba(28, 54, 60, 0.30), rgba(14, 26, 34, 0.22)); border: 1px solid rgba(150, 226, 224, 0.42); box-shadow: inset 0 0 12px rgba(150, 226, 224, 0.12), 0 2px 10px rgba(0, 0, 0, 0.28); } /* Breathing crystalline aura — soft, subordinate to the primary's warmer/larger glow, just enough to signal interactivity. */ .hero__cta--ghost::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: -1; box-shadow: 0 0 12px rgba(127, 224, 216, 0.20), inset 0 0 9px rgba(127, 224, 216, 0.12); animation: hero-crystal-breathe 3.8s ease-in-out infinite; } .hero__cta--ghost .hero__cta-icon { color: #9FECE4; filter: drop-shadow(0 0 4px rgba(127, 224, 216, 0.55)); } .hero__cta--ghost:hover { transform: translateY(-1px); opacity: 1; color: #ECFFFB; border-color: rgba(176, 244, 238, 0.7); background: linear-gradient(160deg, rgba(32, 64, 70, 0.50), rgba(16, 30, 38, 0.42)); box-shadow: inset 0 0 16px rgba(150, 226, 224, 0.20), 0 6px 18px rgba(0, 0, 0, 0.34), 0 0 22px rgba(127, 224, 216, 0.32); } .hero__cta--ghost:hover .hero__cta-icon { transform: rotate(-3deg) scale(1.06); filter: drop-shadow(0 0 7px rgba(150, 240, 232, 0.85)); } @keyframes hero-crystal-breathe { 0%, 100% { opacity: 0.5; box-shadow: 0 0 9px rgba(127, 224, 216, 0.15), inset 0 0 7px rgba(127, 224, 216, 0.10); } 50% { opacity: 0.9; box-shadow: 0 0 20px rgba(127, 224, 216, 0.34), inset 0 0 12px rgba(127, 224, 216, 0.17); } } @media (prefers-reduced-motion: reduce) { .hero__cta--ghost::after { animation: none; opacity: 0.7; } } /* HERO ROLE · plain-language professional line under the poetic lede. Quiet, legible, never competing with the gold tagline — its job is pure clarity for a recruiter scanning the fold. */ .hero__role { margin-top: 0.85rem; max-width: 46ch; font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; line-height: 1.62; color: var(--on-surface-variant); text-wrap: pretty; } html[data-theme="light"] .hero__role { color: #5b4a33; } /* ════════════════════════════════════════════════════════════════════ HERO ROLE · "Ring-inscription" treatment (Lord of the Rings core) -------------------------------------------------------------------- The professional subtitle is framed like the One Ring's fiery inscription: a warm molten-gold gradient that slowly drifts, an ember glow that breathes, and an elven flourish rule above it. The text stays fully legible — the gilding is subtle, not neon. ════════════════════════════════════════════════════════════════════ */ .hero__role--inscription { position: relative; margin-top: 1.2rem; padding-top: 1.05rem; letter-spacing: 0.012em; /* Molten-gold inscription gradient (Mordor firelight → elven gold) */ background-image: linear-gradient( 100deg, #b9893f 0%, #e9c87e 22%, #fff0c2 38%, #e9c87e 52%, #c79a4e 70%, #f0d693 86%, #c79a4e 100% ); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 18px rgba(228, 184, 102, 0.16); animation: hero-ring-inscription 13s ease-in-out infinite; } /* Elven flourish rule above the inscription — a thin gold line with a central ✧, evoking a Rivendell engraving. */ .hero__role--inscription::before { content: ""; position: absolute; top: 0; left: 0; width: clamp(120px, 40%, 230px); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(228, 184, 102, 0.55) 18%, rgba(255, 240, 194, 0.85) 50%, rgba(228, 184, 102, 0.55) 82%, transparent 100%); } .hero__role--inscription::after { content: "\2727"; /* ✧ — elven star mark */ position: absolute; top: -0.62rem; left: clamp(58px, 20%, 114px); transform: translateX(-50%); font-size: 0.74rem; color: #f0d693; text-shadow: 0 0 10px rgba(228, 184, 102, 0.6); -webkit-text-fill-color: #f0d693; animation: hero-ring-twinkle 5.5s ease-in-out infinite; } @keyframes hero-ring-inscription { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes hero-ring-twinkle { 0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.18); } } /* Light theme — deeper bronze so the gilding stays readable on parchment */ html[data-theme="light"] .hero__role--inscription { background-image: linear-gradient( 100deg, #8a5a1f 0%, #b8842f 26%, #d9a94e 44%, #b8842f 64%, #9a6a24 100% ); text-shadow: none; } @media (prefers-reduced-motion: reduce) { .hero__role--inscription { animation: none; background-position: 50% 50%; } .hero__role--inscription::after { animation: none; } } /* TERTIARY CTA · understated text link that still opens the living tree. No fill, no ring — just an underline that warms on hover, so it stays subordinate to the gold seal + crystalline ghost. */ .hero__cta--text { padding: 0.5rem 0.4rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; color: var(--gold-aged, #c2a46b); background: none; border: 1px solid transparent; } .hero__cta--text .hero__cta-label { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s var(--ease-out, cubic-bezier(.16,1,.3,1)); } .hero__cta--text:hover { color: var(--gold-burning, #f2c879); } .hero__cta--text:hover .hero__cta-label { background-size: 100% 1px; } .hero__cta--text:hover .hero__cta-icon { transform: translateY(-1px) rotate(-2deg); } html[data-theme="light"] .hero__cta--text { color: #8a5a1f; } html[data-theme="light"] .hero__cta--text:hover { color: #6b3f18; } /* NARRATIVE CAPTION STRIP · the three-act chapter list anchored to the left edge of the viewport. The list is always visible (chapters are part of the experience), but only the active act is fully lit — past and upcoming acts sit quietly in the wings. On medium screens the strip hides itself entirely to avoid competing with the body content. */ .narrative { position: fixed; top: 50%; left: 1.5rem; transform: translateY(-50%); z-index: 50; pointer-events: none; /* Match the body fade-in: invisible until SkillTree paints its first frame. Effects.js doesn't gate this — instead we trust the parent body fade. */ opacity: 0; animation: narrative-fade-in 1.4s ease 0.6s forwards; } @keyframes narrative-fade-in { to { opacity: 1; } } .narrative__list { display: flex; flex-direction: column; gap: 1.2rem; list-style: none; margin: 0; padding: 0; position: relative; } /* Subtle vertical thread connecting the three roman numerals. It's the spine of the journey — a hairline so the chapter markers feel like beads on a single arcane line. */ .narrative__list::before { content: ""; position: absolute; top: 0.45rem; bottom: 0.45rem; left: 0.55rem; width: 1px; background: linear-gradient(180deg, transparent 0%, rgba(229, 190, 174, 0.25) 12%, rgba(229, 190, 174, 0.42) 50%, rgba(229, 190, 174, 0.25) 88%, transparent 100%); pointer-events: none; } .narrative__act { display: flex; align-items: center; gap: 0.7rem; opacity: 0.36; transform: translateX(-2px); transition: opacity 0.7s ease, transform 0.7s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter 0.6s ease; filter: saturate(0.7) brightness(0.85); position: relative; } .narrative__roman { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; font-family: "Cinzel", "Libre Caslon Text", serif; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); background: rgba(9, 14, 22, 0.65); border: 1px solid rgba(194, 164, 107, 0.35); border-radius: 50%; text-shadow: 0 0 8px rgba(255, 231, 160, 0.18); transition: color 0.6s ease, background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease; flex-shrink: 0; } .narrative__copy { display: flex; flex-direction: column; gap: 0.1rem; /* The labels collapse to zero width when their act isn't active. Past/upcoming acts show only the roman numeral, which keeps the strip narrow and reads like a quiet table of contents. */ max-width: 0; overflow: hidden; transition: max-width 0.7s var(--ease-out, cubic-bezier(.16,1,.3,1)); } .narrative__label { font-family: "Cinzel", "Libre Caslon Text", serif; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); white-space: nowrap; } .narrative__hint { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--on-surface-muted); white-space: nowrap; opacity: 0.85; } /* ACTIVE STATE · driven by html[data-narrative-act="X"]. Each rule lights up exactly one chapter marker — the others stay visible but quietly recede. The text panel expands so the chapter title slides into view from the spine. */ html[data-narrative-act="1"] .narrative__act[data-act="1"], html[data-narrative-act="2"] .narrative__act[data-act="2"], html[data-narrative-act="3"] .narrative__act[data-act="3"], html[data-narrative-act="4"] .narrative__act[data-act="4"], html[data-narrative-act="5"] .narrative__act[data-act="5"] { opacity: 1; transform: translateX(0); filter: saturate(1) brightness(1); } html[data-narrative-act="1"] .narrative__act[data-act="1"] .narrative__roman, html[data-narrative-act="2"] .narrative__act[data-act="2"] .narrative__roman, html[data-narrative-act="3"] .narrative__act[data-act="3"] .narrative__roman, html[data-narrative-act="4"] .narrative__act[data-act="4"] .narrative__roman, html[data-narrative-act="5"] .narrative__act[data-act="5"] .narrative__roman { color: #FFE7A0; background: linear-gradient(160deg, rgba(60, 30, 8, 0.95), rgba(20, 10, 4, 0.95)); border-color: rgba(255, 231, 160, 0.7); box-shadow: inset 0 0 8px rgba(255, 231, 160, 0.25), 0 0 22px rgba(255, 231, 160, 0.35), 0 0 44px rgba(155, 124, 214, 0.18); } html[data-narrative-act="1"] .narrative__act[data-act="1"] .narrative__copy, html[data-narrative-act="2"] .narrative__act[data-act="2"] .narrative__copy, html[data-narrative-act="3"] .narrative__act[data-act="3"] .narrative__copy, html[data-narrative-act="4"] .narrative__act[data-act="4"] .narrative__copy, html[data-narrative-act="5"] .narrative__act[data-act="5"] .narrative__copy { max-width: 230px; } /* On smaller screens the chapter spine would crowd the content — hide it entirely. The page still works without the visual chapter marks because the narrative still drives the wallpaper and the constellation reveal. */ @media (max-width: 1100px) { .narrative { display: none; } } @media (prefers-reduced-motion: reduce) { .narrative, .narrative__act, .narrative__copy { transition: none !important; animation: none !important; } .narrative { opacity: 1; } } /* ============================================================ SKILL TREE WALLPAPER · Body-wide PoE-style tree ============================================================ */ /* The tree fills the entire viewport, behind ALL content. */ .tree-wall { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .tree-wall__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tree-wall__canvas--bg { z-index: 1; } .tree-wall__canvas--fg { z-index: 2; } /* Memory Crystals share the SAME fixed plane as the skill tree. No separate stage, no rectangular field — the crystals float directly over the tree wallpaper as siblings of its canvases. */ .tree-wall__crystal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 3; pointer-events: none; touch-action: none; background: transparent; border: 0; outline: 0; } .tree-wall__crystal-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; background: transparent; } /* Bring background atmospherics behind the tree */ .bg-vault { z-index: 0; } /* All real content sits ABOVE the tree visually, but the tree captures pointer events at the window level and skips over interactive UI. */ .nav { z-index: 100; } main { position: relative; z-index: 10; } .footer { z-index: 10; } .merlin { z-index: 200; } /* Legacy atmospheric layer: subtle only (tree canvas owns the sky) */ .bg-vault { opacity: 0.35; } /* Make content sections semi-transparent so the tree shows through */ .hero, .tree-vault, .memories, .portal { background: transparent; } /* Hero gets a soft vignette so content stays readable over the tree. Anchored at the upper-left to match the compact panel position; sized generously to cover the full-scale portrait + text. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 62% 65% at 24% 40%, rgba(9, 22, 9, 0.80) 0%, rgba(9, 22, 9, 0.42) 55%, transparent 90%); pointer-events: none; } /* Floating tooltip near hovered node */ .tree-tooltip { position: fixed; z-index: 250; pointer-events: none; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.85rem; background: rgba(9, 22, 9, 0.94); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translate(-50%, calc(-100% - 18px)); transition: opacity 0.15s var(--ease-out); white-space: nowrap; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(194, 164, 107, 0.12); } .tree-tooltip.is-visible { opacity: 1; } .tree-tooltip__title { font-family: var(--font-display); font-size: 0.95rem; color: var(--primary); } .tree-tooltip__meta { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } /* The tree-vault section is now just a header + HUD over the wallpaper */ .tree-vault { position: relative; min-height: 100dvh; width: 100%; padding: var(--space-xl) var(--margin-safe) var(--space-lg); display: flex; flex-direction: column; align-items: center; } .tree-vault__header { position: relative; z-index: 3; max-width: 720px; margin: 0 auto; text-align: center; padding: 1rem 1.25rem; /* Marginalia only — no glass rectangle over the skill-tree wallpaper (Visual Boundary Audit, June 2026). Legibility via text-shadow. */ background: transparent; border: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .tree-vault__title, .tree-vault__lede { text-shadow: 0 0 28px rgba(9, 22, 9, 0.85), 0 1px 2px rgba(0, 0, 0, 0.75); } .tree-vault__title { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.15; color: var(--primary); margin-bottom: var(--space-sm); } .tree-vault__lede { font-size: 1rem; color: var(--on-surface-variant); line-height: 1.65; max-width: 58ch; margin: 0 auto; letter-spacing: 0.02em; } /* ============================================================ CRAFT CONSTELLATION ------------------------------------------------------------ Sits between the tree-vault header and the skill-tree HUD. A six-pointed constellation of crystal nodes orbits a central "core" (the architect). Each crystal lights up its connection line and pushes a poetic description into the plate below. Layering: .craft__stage · the constellation viewport .craft__field · soft starfield (radial gradient) .craft__lines · SVG layer for the 6 connecting lines .craft__core · the central node ("VOCÊ") .craft__node[] · 6 satellite crystals .craft__plate · description panel below the stage .craft__epilogue · closing tagline The HTML sits inside #knowledge so the page wallpaper canvas (the actual Skill Tree behind everything) shows through the gaps in the constellation — making the section feel embedded in the same cosmic substrate. ============================================================ */ .craft { --craft-fg: #E5BEAE; --craft-fg-bright: #F4DDC0; --craft-line: rgba(229, 190, 174, 0.42); --craft-line-hot: #FFE7A0; --craft-cyan: #5BC0EB; --craft-violet: #9B7CD6; --craft-deep: #0B1320; --craft-glass: rgba(12, 18, 28, 0.42); --craft-glass-edge: rgba(229, 190, 174, 0.28); position: relative; z-index: 4; margin: 3.4rem auto 4.5rem; max-width: 1180px; padding: 0 1.25rem; isolation: isolate; /* NARRATIVE REVEAL · the constellation does NOT exist on Act I. As the user enters #knowledge, narrative.js animates --craft-reveal from 0 → 1 (eased), and three properties on the section interpolate in lockstep: · opacity 0 → 1 · translateY +28px → 0 · blur 6px → 0 We deliberately don't put a CSS `transition` on these because the JS already smooths the input — adding a transition would introduce lag against the scroll wheel. */ opacity: var(--craft-reveal, 1); transform: translateY(calc((1 - var(--craft-reveal, 1)) * 28px)); filter: blur(calc((1 - var(--craft-reveal, 1)) * 6px)); } /* ── HEADER ───────────────────────────────────────────────────── The header avoids any solid card / banner treatment. Instead it floats over a soft, drifting luminosity mask (::before) — a blurred warm-violet glow that makes the title read with weight against the live skill-tree wallpaper without ever boxing it in. The mask breathes via `craft-title-breath`, so the title sits over an atmosphere that's never frozen. */ .craft__head { position: relative; text-align: center; max-width: 740px; margin: 0 auto 2.2rem; isolation: isolate; } .craft__head::before { content: ""; position: absolute; inset: -28% -22% -42% -22%; background: radial-gradient(ellipse at 50% 45%, rgba(244, 221, 192, 0.16) 0%, rgba(200, 164, 221, 0.10) 28%, rgba(91, 192, 235, 0.06) 52%, transparent 72%); filter: blur(38px); z-index: -1; pointer-events: none; animation: craft-title-breath 11s ease-in-out infinite; } /* The lede + sub gain a whisper of inner glow so they survive against the busy wallpaper without a hard backdrop. */ .craft__title, .craft__sub { position: relative; } .craft__eyebrow { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 0.7rem; letter-spacing: 0.42em; color: var(--craft-fg); opacity: 0.72; margin: 0 0 0.85rem; text-transform: uppercase; } .craft__title { font-family: "Cinzel", "Cormorant Garamond", serif; font-size: clamp(1.55rem, 2.55vw, 2.15rem); line-height: 1.22; font-weight: 500; margin: 0 0 0.95rem; background: linear-gradient(135deg, #F4DDC0 0%, #E5BEAE 35%, #C8A4DD 65%, #5BC0EB 100%); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 32px rgba(229, 190, 174, 0.18); } .craft__sub { font-family: "Cinzel", "Cormorant Garamond", serif; font-weight: 400; font-size: clamp(0.92rem, 1.05vw, 1.05rem); letter-spacing: 0.08em; line-height: 1.55; color: var(--on-surface-variant); margin: 0; opacity: 0.86; } /* ── STAGE · the constellation viewport ─────────────────────── */ .craft__stage { position: relative; width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 800 / 540; /* The stage hosts absolutely-positioned crystals on top of an SVG line layer. Both share the same 800×540 logical space. */ --stage-pad: 0; } /* Decorative starfield behind the constellation. Uses layered radial gradients to suggest cosmic dust without burdening the page with another canvas. */ .craft__field { position: absolute; inset: -8% -6%; pointer-events: none; background: radial-gradient(circle at 22% 30%, rgba(91, 192, 235, 0.10) 0%, transparent 38%), radial-gradient(circle at 78% 70%, rgba(155, 124, 214, 0.10) 0%, transparent 42%), radial-gradient(circle at 50% 50%, rgba(229, 190, 174, 0.06) 0%, transparent 55%); filter: blur(14px); opacity: 0.85; z-index: 0; } .craft__field::before { /* Sparse star motes — two layers of tiny radial dots at different scales so the field feels parallaxed when the page scrolls. */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(244, 221, 192, 0.7) 0%, transparent 60%), radial-gradient(circle, rgba(91, 192, 235, 0.55) 0%, transparent 60%); background-size: 3px 3px, 4px 4px; background-position: 0 0, 30px 40px; opacity: 0.18; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); } /* ── CONNECTION LINES (SVG) ─────────────────────────────────── */ .craft__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; } .craft__line { transition: stroke 0.45s ease, stroke-opacity 0.45s ease, stroke-width 0.45s ease, filter 0.45s ease; filter: drop-shadow(0 0 1px rgba(229, 190, 174, 0.3)); } /* Resting noise reduction — the dashed connections used to compete with the crystals. Primary axes stay readable, secondary axes (theme · identity · ambience) recede so the constellation breathes. */ .craft__stage:not([data-active]) .craft__line { stroke-opacity: 0.45; } .craft__stage:not([data-active]) .craft__line[data-key="theme"], .craft__stage:not([data-active]) .craft__line[data-key="identity"], .craft__stage:not([data-active]) .craft__line[data-key="ambience"] { stroke-opacity: 0.22; } /* Perpetual energy flow — the dashed connections crawl outward from the core toward each crystal, so the constellation always reads as "powered from the centre". Cheap: a single dashoffset loop on six thin lines. The dasharray period is 8 (2 6), so an 8px shift loops seamlessly. Stops automatically on the active (solid) line. */ .craft__line { animation: craft-line-flow 2.6s linear infinite; } @keyframes craft-line-flow { to { stroke-dashoffset: -8; } } /* When the stage marks a key active, brighten that line and dull the others slightly to draw the eye along the highlighted axis. */ .craft__stage[data-active] .craft__line { stroke-opacity: 0.18; } .craft__stage[data-active="story"] .craft__line[data-key="story"], .craft__stage[data-active="ux"] .craft__line[data-key="ux"], .craft__stage[data-active="direction"] .craft__line[data-key="direction"], .craft__stage[data-active="theme"] .craft__line[data-key="theme"], .craft__stage[data-active="identity"] .craft__line[data-key="identity"], .craft__stage[data-active="ambience"] .craft__line[data-key="ambience"] { stroke: var(--craft-line-hot); stroke-opacity: 1; stroke-width: 1.6; stroke-dasharray: 0; filter: drop-shadow(0 0 4px var(--craft-line-hot)) drop-shadow(0 0 10px rgba(255, 231, 160, 0.42)); } /* ── CENTRAL CORE ─────────────────────────────────────────────── The architect ("VOCÊ"). Sits at the gravitational center of the constellation and is intentionally the largest, most luminous crystal so the hierarchy reads instantly: CORE (anchor) > PRIMARY satellites > SECONDARY satellites No text label is needed to communicate the priority — scale and glow do the work. */ .craft__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 196px; height: 196px; display: grid; place-items: center; z-index: 3; pointer-events: none; color: var(--craft-fg-bright); } .craft__core-aura { position: absolute; inset: -52%; border-radius: 50%; /* Brighter, more arcane-purple bloom — the Núcleo Arcano now reads as the luminous heart of the constellation. */ background: radial-gradient(circle, rgba(244, 221, 192, 0.42) 0%, rgba(168, 85, 247, 0.34) 30%, rgba(139, 92, 246, 0.20) 50%, rgba(91, 192, 235, 0.10) 66%, transparent 78%); filter: blur(20px); animation: craft-aura 6.5s ease-in-out infinite; z-index: -1; } .craft__core-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(229, 190, 174, 0.45); animation: craft-ring 9s linear infinite; } /* Orbital mote riding each ring — because the ring rotates, the dot orbits the core like a captured spark of energy. */ .craft__core-ring::after { content: ""; position: absolute; top: -3.5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--arcane-bright) 55%, transparent 75%); box-shadow: 0 0 8px var(--arcane-bright), 0 0 16px rgba(168, 85, 247, 0.7); } .craft__core-ring--alt { inset: 18%; border-color: rgba(168, 85, 247, 0.45); border-style: dashed; animation: craft-ring 14s linear infinite reverse, craft-aura 5s ease-in-out infinite; } .craft__core-ring--alt::after { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; background: radial-gradient(circle, #fff 0%, var(--craft-cyan, #5BC0EB) 55%, transparent 75%); box-shadow: 0 0 6px var(--craft-cyan, #5BC0EB), 0 0 12px rgba(91, 192, 235, 0.7); } /* Slow ring of orbital runes — the artefact's inscription, turning on its own axis between the rings and the central crystal. */ .craft__core-runes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: var(--arcane-bright); animation: craft-ring 46s linear infinite; will-change: transform; } .craft__core-rune-text { fill: currentColor; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 2.5px; opacity: 0.55; filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.65)); } .craft__core-mark { position: relative; z-index: 1; width: 106px; height: 106px; display: grid; place-items: center; border-radius: 24%; background: radial-gradient(circle at 30% 28%, rgba(244, 221, 192, 0.22), transparent 65%), radial-gradient(circle at 70% 75%, rgba(168, 85, 247, 0.30), transparent 65%), linear-gradient(160deg, rgba(26, 16, 40, 0.80), rgba(8, 12, 22, 0.92)); border: 1px solid rgba(229, 190, 174, 0.5); box-shadow: inset 0 0 26px rgba(244, 221, 192, 0.22), 0 0 40px rgba(139, 92, 246, 0.42), 0 0 70px rgba(139, 92, 246, 0.20), 0 0 0 1px rgba(255, 231, 160, 0.16); /* float (position) + pulse (glow heartbeat) run together. */ animation: craft-core-float 7s ease-in-out infinite, craft-core-pulse 4.5s ease-in-out infinite; } /* The central crystal turns slowly on its own axis — the living heart of the cosmology. */ .craft__core-mark svg { color: var(--craft-fg-bright); animation: craft-crystal-spin 64s linear infinite; } @keyframes craft-core-pulse { 0%, 100% { box-shadow: inset 0 0 26px rgba(244, 221, 192, 0.22), 0 0 40px rgba(139, 92, 246, 0.42), 0 0 70px rgba(139, 92, 246, 0.20), 0 0 0 1px rgba(255, 231, 160, 0.16); } 50% { box-shadow: inset 0 0 32px rgba(244, 221, 192, 0.32), 0 0 56px rgba(168, 85, 247, 0.62), 0 0 96px rgba(139, 92, 246, 0.34), 0 0 0 1px rgba(255, 231, 160, 0.28); } } .craft__core-label { position: absolute; bottom: -1.4rem; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.5em; color: var(--craft-fg); margin: 0; text-transform: uppercase; text-shadow: 0 0 12px rgba(255, 231, 160, 0.35); } /* ── SATELLITE NODES ────────────────────────────────────────── */ .craft__node { position: absolute; width: 138px; display: grid; place-items: center; gap: 0.45rem; transform: translate(-50%, -50%); background: transparent; border: 0; padding: 0; color: var(--craft-fg-bright); cursor: pointer; z-index: 4; font-family: inherit; /* Each crystal floats with a unique phase so the constellation breathes rather than pulsing in unison. */ animation: craft-node-float 7s ease-in-out infinite; transition: transform 0.5s var(--ease-out, cubic-bezier(.42,0,.58,1)), filter 0.4s ease; } .craft__node[data-pos="n"] { top: 11%; left: 50%; } .craft__node[data-pos="ne"] { top: 31%; left: 73.5%; animation-delay: -1.1s; } .craft__node[data-pos="se"] { top: 69%; left: 73.5%; animation-delay: -2.2s; } .craft__node[data-pos="s"] { top: 89%; left: 50%; animation-delay: -3.3s; } .craft__node[data-pos="sw"] { top: 69%; left: 26.5%; animation-delay: -4.4s; } .craft__node[data-pos="nw"] { top: 31%; left: 26.5%; animation-delay: -5.5s; } .craft__node-aura { position: absolute; inset: -20% -20% 30% -20%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 221, 192, 0.35) 0%, rgba(155, 124, 214, 0.18) 35%, transparent 70%); filter: blur(12px); opacity: 0.55; transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; z-index: -1; } .craft__node-crystal { position: relative; /* Default size — overridden per tier below. Kept as a sensible fallback in case a future node ships without a data-tier. */ width: 78px; height: 78px; display: grid; place-items: center; border-radius: 22%; background: radial-gradient(circle at 32% 28%, rgba(244, 221, 192, 0.16), transparent 60%), radial-gradient(circle at 70% 70%, rgba(91, 192, 235, 0.18), transparent 60%), linear-gradient(160deg, rgba(18, 14, 26, 0.82), rgba(6, 10, 18, 0.92)); border: 1px solid rgba(229, 190, 174, 0.35); box-shadow: inset 0 0 16px rgba(244, 221, 192, 0.12), 0 0 0 1px rgba(255, 231, 160, 0.08), 0 0 24px rgba(155, 124, 214, 0.18); color: var(--craft-fg-bright); transition: transform 0.4s var(--ease-out, cubic-bezier(.42,0,.58,1)), box-shadow 0.4s ease, border-color 0.4s ease, color 0.4s ease; } /* ── TIER · visual hierarchy between the three primary pillars (Storytelling, UX, Art Direction) and the three secondary ones (Theme, Identity, Ambience). Primary crystals read with more weight; secondaries feel like quieter satellites without ever losing presence. The aura scales follow so the glow stays proportional to the body. */ .craft__node[data-tier="primary"] .craft__node-crystal { width: 88px; height: 88px; /* Higher contrast so the three core domains clearly outrank the secondary satellites and read as the pillars of the craft. */ border-color: rgba(244, 221, 192, 0.62); background: radial-gradient(circle at 32% 28%, rgba(244, 221, 192, 0.24), transparent 60%), radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.24), transparent 60%), linear-gradient(160deg, rgba(22, 16, 32, 0.86), rgba(6, 10, 18, 0.94)); box-shadow: inset 0 0 22px rgba(244, 221, 192, 0.24), 0 0 0 1px rgba(255, 231, 160, 0.2), 0 0 38px rgba(168, 85, 247, 0.3); } .craft__node[data-tier="primary"] .craft__node-aura { inset: -28% -28% 26% -28%; opacity: 0.78; } .craft__node[data-tier="secondary"] .craft__node-crystal { width: 66px; height: 66px; border-color: rgba(229, 190, 174, 0.28); box-shadow: inset 0 0 14px rgba(244, 221, 192, 0.10), 0 0 0 1px rgba(255, 231, 160, 0.06), 0 0 20px rgba(155, 124, 214, 0.14); } .craft__node[data-tier="secondary"] .craft__node-aura { inset: -16% -16% 32% -16%; opacity: 0.48; } .craft__node[data-tier="secondary"] .craft__node-label { font-size: 0.82rem; opacity: 0.78; } .craft__node-crystal::before { /* A subtle inner facet line — gives the crystal a hexagonal cut. */ content: ""; position: absolute; inset: 6px; border-radius: 18%; border: 1px solid rgba(229, 190, 174, 0.14); pointer-events: none; } /* LIVING ARTIFACT · continuous micro-motion. Each crystal hosts two ambient layers that never stop moving: ::after → a soft luminous halo that breathes (opacity + scale) every ~6s, giving the impression of an inner ember. svg → the rune mark drifts in an ultra-slow rotation (~64s per turn) so the glyph never sits perfectly still without ever feeling busy. The two layers carry per-crystal animation-delays (see the data-key blocks further down) so the constellation breathes asynchronously — no two crystals pulse in lockstep. */ .craft__node-crystal::after { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 231, 160, 0.22) 0%, rgba(155, 124, 214, 0.16) 40%, transparent 72%); filter: blur(10px); opacity: 0.45; z-index: -1; pointer-events: none; animation: craft-crystal-breath 6.4s ease-in-out infinite; } .craft__node-crystal svg { animation: craft-crystal-spin 64s linear infinite; transform-origin: 50% 50%; } /* Stagger the breath + spin per crystal so the rhythm feels organic instead of metronomic. Numbers chosen to avoid harmonic alignment (no two delays are integer multiples). */ .craft__node[data-key="story"] .craft__node-crystal::after { animation-delay: -0.4s; } .craft__node[data-key="ux"] .craft__node-crystal::after { animation-delay: -1.9s; } .craft__node[data-key="direction"] .craft__node-crystal::after { animation-delay: -3.1s; } .craft__node[data-key="theme"] .craft__node-crystal::after { animation-delay: -4.7s; } .craft__node[data-key="identity"] .craft__node-crystal::after { animation-delay: -2.3s; } .craft__node[data-key="ambience"] .craft__node-crystal::after { animation-delay: -5.6s; } .craft__node[data-key="ux"] .craft__node-crystal svg { animation-duration: 78s; } .craft__node[data-key="direction"] .craft__node-crystal svg { animation-duration: 56s; animation-direction: reverse; } .craft__node[data-key="theme"] .craft__node-crystal svg { animation-duration: 92s; animation-direction: reverse; } .craft__node[data-key="identity"] .craft__node-crystal svg { animation-duration: 72s; } .craft__node[data-key="ambience"] .craft__node-crystal svg { animation-duration: 84s; animation-direction: reverse; } .craft__node-label { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: 0.88rem; letter-spacing: 0.04em; color: var(--craft-fg); text-align: center; line-height: 1.25; opacity: 0.86; transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease; pointer-events: none; max-width: 12ch; } /* HOVER / FOCUS · the chosen node lifts, brightens and casts a stronger glow; the rest dim slightly to focus the eye. */ .craft__node:hover, .craft__node:focus-visible { outline: none; transform: translate(-50%, calc(-50% - 6px)); filter: drop-shadow(0 6px 18px rgba(255, 231, 160, 0.22)); } .craft__node:hover .craft__node-aura, .craft__node:focus-visible .craft__node-aura, .craft__stage[data-active="story"] .craft__node[data-key="story"] .craft__node-aura, .craft__stage[data-active="ux"] .craft__node[data-key="ux"] .craft__node-aura, .craft__stage[data-active="direction"] .craft__node[data-key="direction"] .craft__node-aura, .craft__stage[data-active="theme"] .craft__node[data-key="theme"] .craft__node-aura, .craft__stage[data-active="identity"] .craft__node[data-key="identity"] .craft__node-aura, .craft__stage[data-active="ambience"] .craft__node[data-key="ambience"] .craft__node-aura { opacity: 1; transform: scale(1.18); } /* Mirror the hover/focus crystal emphasis for the JS-driven active state so the node stays bright while its description is on the plate (e.g. after a tap on touch screens). */ .craft__stage[data-active="story"] .craft__node[data-key="story"] .craft__node-crystal, .craft__stage[data-active="ux"] .craft__node[data-key="ux"] .craft__node-crystal, .craft__stage[data-active="direction"] .craft__node[data-key="direction"] .craft__node-crystal, .craft__stage[data-active="theme"] .craft__node[data-key="theme"] .craft__node-crystal, .craft__stage[data-active="identity"] .craft__node[data-key="identity"] .craft__node-crystal, .craft__stage[data-active="ambience"] .craft__node[data-key="ambience"] .craft__node-crystal { border-color: rgba(255, 231, 160, 0.7); box-shadow: inset 0 0 24px rgba(244, 221, 192, 0.22), 0 0 0 1px rgba(255, 231, 160, 0.45), 0 0 28px rgba(255, 231, 160, 0.35), 0 0 52px rgba(155, 124, 214, 0.28); color: var(--craft-line-hot); } .craft__node:hover .craft__node-crystal, .craft__node:focus-visible .craft__node-crystal { transform: rotate(-6deg) scale(1.06); border-color: rgba(255, 231, 160, 0.7); box-shadow: inset 0 0 24px rgba(244, 221, 192, 0.22), 0 0 0 1px rgba(255, 231, 160, 0.45), 0 0 32px rgba(255, 231, 160, 0.45), 0 0 60px rgba(155, 124, 214, 0.35); color: var(--craft-line-hot); } .craft__node:hover .craft__node-label, .craft__node:focus-visible .craft__node-label { color: var(--craft-fg-bright); opacity: 1; transform: translateY(2px); } /* CONTEXTUAL FOCUS · dim the unrelated, never the universe. When any crystal is active, the others step back just enough to let the chosen one read first — but they remain fully legible. The intent is "I'm exploring this region" not "everything else shut off". Compared to a heavy filter, we use a gentler brightness drop combined with a small opacity nudge so the diff is felt rather than seen. */ .craft__stage[data-active] .craft__node:not(:hover):not(:focus-visible) { filter: brightness(0.9) saturate(0.94); opacity: 0.78; } .craft__stage[data-active] .craft__node:not(:hover):not(:focus-visible) .craft__node-label { opacity: 0.7; } /* The central core also softens — it never competes with an active satellite but stays visibly present, anchoring the constellation. */ .craft__stage[data-active] ~ * .craft__core, .craft__stage[data-active] .craft__core { filter: brightness(0.88) saturate(0.96); opacity: 0.86; transition: filter 0.5s ease, opacity 0.5s ease; } /* ── DESCRIPTION PLATE ──────────────────────────────────────── */ .craft__plate { position: relative; max-width: 720px; margin: 2.6rem auto 1.4rem; padding: 1.25rem 1.75rem 1.4rem; background: linear-gradient(160deg, rgba(18, 14, 26, 0.55), rgba(8, 12, 22, 0.7)); border: 1px solid var(--craft-glass-edge); border-radius: 14px; box-shadow: inset 0 0 22px rgba(244, 221, 192, 0.08), 0 12px 36px rgba(0, 0, 0, 0.45); text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease; } .craft__plate.is-active { border-color: rgba(255, 231, 160, 0.5); box-shadow: inset 0 0 22px rgba(255, 231, 160, 0.12), 0 14px 42px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 231, 160, 0.18); transform: translateY(-2px); } .craft__plate-key { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.4em; color: var(--craft-line-hot); margin-bottom: 0.55rem; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 231, 160, 0.35); } .craft__plate-body { font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.65; color: var(--on-surface); margin: 0; max-width: 60ch; margin-inline: auto; transition: opacity 0.35s ease; } /* ── KNOWLEDGE ECHO · the 4 allied disciplines that orbit each craft pillar. Rendered as small parchment chips at the bottom of the description plate. Hidden when no crystal is active; fades in on hover/focus with a 70ms cascade so the chips read like a slow reveal rather than a flash. Each chip carries a tiny sigil (✦) before the label to keep visual ties to the crystal universe. */ .craft__echo { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.55rem; margin: 1.05rem auto 0; padding: 0; max-width: 600px; min-height: 28px; list-style: none; opacity: 0; transform: translateY(4px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .craft__plate.is-active .craft__echo { opacity: 1; transform: translateY(0); pointer-events: auto; } .craft__echo-tag { position: relative; display: inline-flex; align-items: center; padding: 0.34rem 0.78rem; border-radius: 999px; background: linear-gradient(160deg, rgba(244, 221, 192, 0.08), rgba(155, 124, 214, 0.06)); border: 1px solid rgba(255, 231, 160, 0.22); color: var(--craft-fg); font-family: "Inter", system-ui, sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.35s ease, color 0.35s ease, background 0.35s ease; } .craft__echo-tag:empty { display: none; } .craft__echo-tag::before { content: "✦"; margin-right: 0.45em; font-size: 0.7em; color: var(--craft-line-hot); opacity: 0.65; vertical-align: 0.05em; } .craft__plate.is-active .craft__echo-tag { opacity: 1; transform: translateY(0) scale(1); } .craft__plate.is-active .craft__echo-tag:nth-child(1) { transition-delay: 0.06s; } .craft__plate.is-active .craft__echo-tag:nth-child(2) { transition-delay: 0.14s; } .craft__plate.is-active .craft__echo-tag:nth-child(3) { transition-delay: 0.22s; } .craft__plate.is-active .craft__echo-tag:nth-child(4) { transition-delay: 0.30s; } .craft__echo-tag:hover, .craft__echo-tag:focus-visible { color: var(--craft-line-hot); border-color: rgba(255, 231, 160, 0.55); background: linear-gradient(160deg, rgba(255, 231, 160, 0.14), rgba(155, 124, 214, 0.10)); outline: none; } /* ── EPILOGUE · closing tagline below the constellation ─────── */ .craft__epilogue { max-width: 760px; margin: 1.4rem auto 0; text-align: center; font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: 0.92rem; line-height: 1.6; color: var(--on-surface-variant); opacity: 0.78; letter-spacing: 0.03em; } /* WALLPAPER FOCUS · the live skill-tree wallpaper retreats by two independent forces, multiplied: 1. NARRATIVE PROGRESS — as the user scrolls through #knowledge, --tree-wall-dim (0..0.55, set by narrative.js) gently pulls brightness down so the universe stays alive but lets the constellation read forward. 2. CRAFT HOVER — when any craft crystal is hovered, an extra nudge layers on so the eye anchors on the active region. We compose both into one filter declaration via calc() instead of overriding, so the two effects accumulate gracefully. */ .tree-wall { filter: brightness(calc(1 - var(--tree-wall-dim, 0) * 0.32)) saturate(calc(1 - var(--tree-wall-dim, 0) * 0.20)); transition: filter 0.7s ease; } html[data-craft-active] .tree-wall { filter: brightness(calc((1 - var(--tree-wall-dim, 0) * 0.32) * 0.92)) saturate(calc((1 - var(--tree-wall-dim, 0) * 0.20) * 0.94)); } /* ── ANIMATIONS ─────────────────────────────────────────────── */ @keyframes craft-aura { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes craft-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes craft-core-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(2deg); } } @keyframes craft-node-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } } /* The slow ember beneath each crystal — barely visible, but it guarantees the constellation is never frozen. The pulse is asymmetric so the rise and fall don't read as a beat. */ @keyframes craft-crystal-breath { 0%, 100% { opacity: 0.32; transform: scale(0.96); } 45% { opacity: 0.58; transform: scale(1.06); } } /* Ultra-slow rotation applied to the rune SVG inside each crystal. At 60s+ per turn, the eye reads it as "alive" rather than "moving". The hover state does NOT cancel it; it runs over the hover transform because it lives on a child element. */ @keyframes craft-crystal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Title halo · soft luminous mask that lives behind .craft__head. Drifts gently so the title never sits over a static glow. */ @keyframes craft-title-breath { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.04); } } /* Reduced motion — keep the visuals legible, drop the breathing. The ambient ember and slow spin both pause; only structural layout and hover responses remain. */ @media (prefers-reduced-motion: reduce) { .craft__node, .craft__node-crystal::after, .craft__node-crystal svg, .craft__core-aura, .craft__core-ring, .craft__core-mark, .craft__core-mark svg, .craft__core-runes, .craft__line, .craft__head::before { animation: none !important; } } /* ── RESPONSIVE ───────────────────────────────────────────────── On medium screens we shrink everything but preserve the primary > secondary visual gap. Selectors include [data-tier] so they out-specify the desktop tier rules above. */ @media (max-width: 880px) { .craft__stage { max-width: 640px; aspect-ratio: 800 / 600; } .craft__core { width: 164px; height: 164px; } .craft__core-mark { width: 88px; height: 88px; } .craft__node { width: 118px; } .craft__node-crystal { width: 66px; height: 66px; } .craft__node[data-tier="primary"] .craft__node-crystal { width: 74px; height: 74px; } .craft__node[data-tier="secondary"] .craft__node-crystal { width: 56px; height: 56px; } .craft__node-label { font-size: 0.82rem; } } @media (max-width: 640px) { /* On narrow screens the constellation would clip — collapse the 6 satellites into a 2-column grid below the central core. Lines are hidden because they no longer connect to the right targets. */ .craft { margin: 2.6rem auto 3.4rem; } .craft__stage { aspect-ratio: auto; max-width: 100%; padding-top: 220px; /* space reserved for the central core */ padding-bottom: 0; } .craft__field { display: none; } .craft__lines { display: none; } .craft__core { top: 110px; left: 50%; width: 178px; height: 178px; } .craft__node { position: relative; top: auto !important; left: auto !important; transform: none !important; width: 100%; animation: none; } .craft__node:hover, .craft__node:focus-visible { transform: translateY(-3px) !important; } .craft__stage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0.6rem; place-items: center; } /* Span the core full-width above the grid. */ .craft__core { grid-column: 1 / -1; position: relative; top: auto; left: auto; transform: none; margin: 0 auto 1.5rem; } } /* ── LIGHT THEME · sepia/parchment crystals ─────────────────── */ html[data-theme="light"] .craft { --craft-fg: #5C2B1F; --craft-fg-bright: #8C5A2F; --craft-line: rgba(140, 90, 47, 0.45); --craft-line-hot: #8C5A2F; --craft-glass: rgba(248, 232, 196, 0.55); --craft-glass-edge: rgba(140, 90, 47, 0.32); } html[data-theme="light"] .craft__title { background: linear-gradient(135deg, #6B3018 0%, #8C5A2F 45%, #5C2B1F 100%); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; } html[data-theme="light"] .craft__sub, html[data-theme="light"] .craft__epilogue { color: var(--burgundy, #5C2B1F); opacity: 0.86; } html[data-theme="light"] .craft__core-mark, html[data-theme="light"] .craft__node-crystal { background: radial-gradient(circle at 30% 30%, rgba(248, 232, 196, 0.85), transparent 60%), linear-gradient(160deg, rgba(232, 210, 168, 0.95), rgba(204, 168, 110, 0.95)); border-color: rgba(140, 90, 47, 0.5); box-shadow: inset 0 0 18px rgba(255, 240, 200, 0.55), 0 0 0 1px rgba(140, 90, 47, 0.2), 0 0 18px rgba(212, 168, 110, 0.35); color: var(--burgundy, #5C2B1F); } html[data-theme="light"] .craft__plate { background: linear-gradient(160deg, rgba(248, 232, 196, 0.7), rgba(228, 200, 150, 0.55)); border-color: rgba(140, 90, 47, 0.4); box-shadow: inset 0 0 22px rgba(255, 240, 200, 0.4), 0 12px 30px rgba(60, 30, 8, 0.18); } html[data-theme="light"] .craft__plate-key { color: var(--burgundy, #5C2B1F); text-shadow: none; } html[data-theme="light"] .craft__plate-body { color: var(--ink-deep, #3a1810); } html[data-theme="light"] .craft__line { filter: none; } /* Echo chips · sepia-bronze wax on light parchment */ html[data-theme="light"] .craft__echo-tag { background: linear-gradient(160deg, rgba(248, 232, 196, 0.85), rgba(228, 200, 150, 0.6)); border-color: rgba(140, 90, 47, 0.45); color: var(--burgundy, #5C2B1F); } html[data-theme="light"] .craft__echo-tag::before { color: var(--burgundy, #5C2B1F); opacity: 0.7; } html[data-theme="light"] .craft__echo-tag:hover, html[data-theme="light"] .craft__echo-tag:focus-visible { background: linear-gradient(160deg, rgba(255, 240, 200, 0.95), rgba(232, 192, 130, 0.75)); border-color: rgba(140, 90, 47, 0.7); color: var(--rust, #A13E1E); } /* In light mode the wallpaper canvas is already very subdued (bg fully hidden, fg multiply-blended). A heavy filter would wash it out entirely — use the lightest possible nudge. */ html[data-theme="light"][data-craft-active] .tree-wall { filter: brightness(0.95) saturate(0.96); } html[data-theme="light"] .craft__stage[data-active="story"] .craft__line[data-key="story"], html[data-theme="light"] .craft__stage[data-active="ux"] .craft__line[data-key="ux"], html[data-theme="light"] .craft__stage[data-active="direction"] .craft__line[data-key="direction"], html[data-theme="light"] .craft__stage[data-active="theme"] .craft__line[data-key="theme"], html[data-theme="light"] .craft__stage[data-active="identity"] .craft__line[data-key="identity"], html[data-theme="light"] .craft__stage[data-active="ambience"] .craft__line[data-key="ambience"] { stroke: #8C5A2F; filter: drop-shadow(0 0 4px rgba(140, 90, 47, 0.45)) drop-shadow(0 0 10px rgba(212, 168, 110, 0.3)); } /* HUD floats fixed at the TOP-RIGHT corner (just below the nav) so it doesn't compete with the upper-left Hero panel and, more importantly, leaves the bottom-right free for Merlin who likes to teleport around that corner. Sizing note: the panel is intentionally compact — the Skill Tree itself is the primary visual focus, the HUD is just an instrument readout. Roughly 20% smaller than the original bottom-right design. */ .tree-hud { position: fixed; z-index: 90; top: 5rem; right: 1rem; bottom: auto; left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; max-width: 240px; pointer-events: none; } .tree-hud__panel { pointer-events: all; padding: 0.6rem 0.75rem; background: rgba(9, 22, 9, 0.78); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } .tree-hud__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .tree-hud__label { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-muted); } .tree-hud__count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--gold); } .tree-hud__count strong { font-size: 1.05rem; font-weight: 500; color: var(--primary); margin-right: 0.1rem; } .tree-hud__divider { color: var(--on-surface-muted); margin: 0 0.25rem; } .tree-hud__bar { height: 1.5px; background: var(--surface-container-highest); border-radius: var(--radius-full); overflow: hidden; } .tree-hud__bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, #4a8db5 0%, #afcdc1 30%, #c2a46b 65%, #e5beae 100%); border-radius: var(--radius-full); transition: width 0.6s var(--ease-out); box-shadow: 0 0 8px rgba(194, 164, 107, 0.4); } .tree-hud__clusters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 0.4rem; } .cluster-tag { display: flex; align-items: center; gap: 0.32rem; font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-muted); transition: color 0.3s; white-space: nowrap; } .cluster-tag.is-mastered { color: var(--primary); } .cluster-tag__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cluster-color, #6f7f6c); box-shadow: 0 0 5px var(--cluster-color, #6f7f6c); flex-shrink: 0; opacity: 0.45; transition: opacity 0.3s; } .cluster-tag.is-mastered .cluster-tag__dot { opacity: 1; } .cluster-tag__count { margin-left: auto; color: var(--on-surface-muted); font-size: 0.44rem; } .tree-hud__actions { display: flex; align-items: center; gap: 0.25rem; border-top: 1px solid var(--glass-border); padding-top: 0.45rem; } .tree-hud__action { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.28rem 0.45rem; font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-muted); border: 1px solid transparent; border-radius: var(--radius-sm); transition: color 0.2s, border-color 0.2s; } .tree-hud__action:hover, .tree-hud__action:focus-visible { color: var(--gold); border-color: var(--gold-dim); outline: none; } .tree-hud__action--reset { margin-left: auto; } .tree-hud__action--reset:hover, .tree-hud__action--reset:focus-visible { color: var(--rust); border-color: rgba(161, 62, 30, 0.4); } .tree-hud__hint { pointer-events: none; align-self: flex-end; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; background: rgba(9, 22, 9, 0.78); border: 1px solid var(--glass-border); border-radius: var(--radius-full); backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); opacity: 1; transition: opacity 0.5s; } .tree-hud__hint.is-fading { opacity: 0; } .tree-hud__hint-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: hint-pulse 1.6s ease-in-out infinite; } @keyframes hint-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.3); opacity: 1; } } /* Ritual overlay (unchanged structure, refined) */ .ritual { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease-out), background 1.2s var(--ease-out); } .ritual.is-active { opacity: 1; pointer-events: all; background: rgba(2, 6, 4, 0.94); } .ritual__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .ritual__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 0 1.5rem; } .ritual__rune { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.4) rotate(-180deg); transition: opacity 1.4s 0.3s var(--ease-out), transform 1.8s 0.3s var(--ease-out); } .ritual.is-active .ritual__rune { opacity: 1; transform: scale(1) rotate(0deg); } .ritual__rune svg { animation: rune-spin 36s linear infinite; } @keyframes rune-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .ritual__rune-inner { animation: rune-glow 3s ease-in-out infinite alternate; } @keyframes rune-glow { from { filter: drop-shadow(0 0 4px rgba(194,164,107,0.4)); } to { filter: drop-shadow(0 0 22px rgba(229,190,174,0.85)); } } .ritual__photo { position: absolute; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); opacity: 0; transform: scale(0.3); transition: opacity 1.6s 2.6s var(--ease-out), transform 2s 2.6s var(--ease-out); } .ritual.is-active.is-revealed .ritual__photo { opacity: 1; transform: scale(1); } .ritual__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .ritual__photo-halo { position: absolute; inset: -50%; border-radius: 50%; background: radial-gradient(circle, rgba(229,190,174,0.4) 0%, transparent 60%); pointer-events: none; animation: photo-halo 4s ease-in-out infinite alternate; } @keyframes photo-halo { from { opacity: 0.6; transform: scale(0.95); } to { opacity: 1; transform: scale(1.08); } } .ritual__title { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: 0.04em; color: var(--primary); opacity: 0; transform: translateY(20px); transition: opacity 1s 4s var(--ease-out), transform 1s 4s var(--ease-out); margin-top: 1.5rem; } .ritual.is-active.is-revealed .ritual__title { opacity: 1; transform: translateY(0); } .ritual__subtitle { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity 1s 4.4s var(--ease-out); } .ritual.is-active.is-revealed .ritual__subtitle { opacity: 1; } .ritual__close { margin-top: 2rem; padding: 0.7rem 1.4rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); background: var(--primary-container); border: 1px solid var(--ochre); border-radius: var(--radius-sm); opacity: 0; transition: opacity 1s 5s var(--ease-out), border-color 0.3s, box-shadow 0.3s; } .ritual.is-active.is-revealed .ritual__close { opacity: 1; } .ritual__close:hover, .ritual__close:focus-visible { border-color: var(--gold); box-shadow: 0 0 24px rgba(194, 164, 107, 0.3); outline: none; } @media (max-width: 767px) { /* MOBILE TREE-HUD · hidden entirely. ----------------------------------------------- The "DOMINADO" mastery panel has no interaction on touch (its hover legend / actions are desktop-only), so on phones it was just chrome cluttering the top-right corner. Remove it. The mastery count still tracks internally; it simply isn't shown. */ .tree-hud { display: none; } .tree-vault__header { padding: 0.85rem 1rem; } } /* ============================================================ MEMORY CRYSTALS · Narrative anchor only ------------------------------------------------------------ The Memory Crystals do NOT live inside this section anymore. The 3D scene is rendered globally inside .tree-wall, sharing the exact plane of the skill-tree canvases. This section is pure prose (header + legend + info card) — a scroll target that explains what the floating crystals are. ============================================================ */ .memories { position: relative; z-index: var(--z-content); padding: var(--space-xl) var(--margin-safe); max-width: 1400px; margin: 0 auto; /* isolation: isolate removed (June 2026) — it boxed mix-blend-mode children and drew a faint rectangular stack boundary during the singularity / Big Bang sequence ("borda fantasma"). */ overflow: visible; border: none; outline: none; box-shadow: none; background: transparent; pointer-events: none; /* tree wallpaper receives idle hits */ /* Parallax driver (set by JS) — read by the crystal scene */ --mx: 0; --my: 0; } /* Interactive memories UI — re-enables pointer events */ .memories__head, .crystal-caption, .crystal-loader { pointer-events: auto; } /* No vignette, no decorative box: the section must not introduce any visual frame around the wallpaper. */ .memories::before { display: none !important; content: none !important; } /* ------------------------------------------------------------ */ /* Header (text marginalia) */ /* ------------------------------------------------------------ */ .memories__head { position: relative; z-index: 2; max-width: 760px; margin: 0 auto var(--space-lg); text-align: center; padding: 1.4rem 1.5rem; /* Aligns with .memories design note: no decorative frame on the wallpaper — only typographic marginalia (VBA, June 2026). */ background: transparent; border: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; /* HUD parallax — barely moves (closest UI plane) */ translate: calc(var(--mx) * 3px) calc(var(--my) * 3px); } .memories__eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; opacity: 0.85; text-shadow: 0 0 12px rgba(194, 164, 107, 0.35), 0 0 24px rgba(9, 22, 9, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8); } .memories__title { font-family: var(--font-display); font-size: clamp(1.65rem, 3.6vw, 2.35rem); color: var(--primary); line-height: 1.1; margin-bottom: 0.8rem; letter-spacing: -0.005em; text-shadow: 0 0 22px rgba(229, 190, 174, 0.25), 0 0 32px rgba(9, 22, 9, 0.88), 0 1px 3px rgba(0, 0, 0, 0.82); } .memories__lede { font-size: 0.95rem; line-height: 1.6; color: var(--on-surface-variant); max-width: 56ch; margin: 0 auto 1.4rem; text-shadow: 0 0 20px rgba(9, 22, 9, 0.9), 0 1px 2px rgba(0, 0, 0, 0.75); } .memories__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: center; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; } .memories__legend-item { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--on-surface-muted); } .memories__legend-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; } .memories__legend-item[data-rarity="common"] .memories__legend-dot { background: #3FD68B; color: #3FD68B; } .memories__legend-item[data-rarity="rare"] .memories__legend-dot { background: #3F9CD6; color: #3F9CD6; } .memories__legend-item[data-rarity="epic"] .memories__legend-dot { background: #9B5CD9; color: #9B5CD9; } .memories__legend-item[data-rarity="legendary"] .memories__legend-dot { background: #E5BEAE; color: #E5BEAE; } /* ------------------------------------------------------------ */ /* "Explorar Relíquias" — gateway to the guided relic-card tour */ /* ------------------------------------------------------------ */ .memories__explore { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.55rem; margin: 1.5rem auto 0; padding: 0.6rem 1.35rem; border-radius: 4px; font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; color: #2a1808; background: linear-gradient(160deg, #f1dcb8 0%, #d8b984 52%, #bc954f 100%); border: 1px solid rgba(120, 80, 40, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 245, 220, 0.45), 0 4px 14px rgba(0, 0, 0, 0.34); transition: transform 0.35s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow 0.45s ease, background 0.45s ease; isolation: isolate; } .memories__explore-sigil { display: inline-flex; color: #4a2e12; filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.4)); } .memories__explore-arrow { display: inline-flex; transition: transform 0.4s var(--ease-out, cubic-bezier(.16,1,.3,1)); } .memories__explore:hover, .memories__explore:focus-visible { outline: none; transform: translateY(-1px); background: linear-gradient(160deg, #f8e7c6 0%, #e3c590 52%, #c8a056 100%); box-shadow: inset 0 0 0 1px rgba(255, 245, 220, 0.6), 0 7px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 231, 160, 0.32); } .memories__explore:hover .memories__explore-arrow, .memories__explore:focus-visible .memories__explore-arrow { transform: translateX(3px); } .memories__explore:active { transform: translateY(0) scale(0.99); } @media (prefers-reduced-motion: reduce) { .memories__explore, .memories__explore-arrow { transition: none; } } /* ------------------------------------------------------------ */ /* Floating loader — bottom-right, no stage */ /* ------------------------------------------------------------ */ .crystal-loader { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 200; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.85rem 0.55rem 0.7rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-surface-muted); background: rgba(9, 22, 9, 0.55); border: 1px solid var(--glass-border); border-radius: var(--radius-full); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32); } /* ------------------------------------------------------------ */ /* Crystal captions — projected from 3D positions */ /* ------------------------------------------------------------ */ .crystal-caption { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; pointer-events: auto; cursor: pointer; transition: opacity 0.35s var(--ease-out), filter 0.35s var(--ease-out); will-change: transform, opacity; z-index: 1; } /* Rarity pill · phantom-border fix (June 2026): the previous `border: 1px solid` + opaque background + backdrop-filter rendered as a tiny rectangle floating beside each crystal ("borda fantasma" in Memories). It is now a typographic marginalia: pure colour + glow, no frame, no panel. */ .crystal-caption__rarity { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-light); padding: 0.15rem 0.5rem; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 0 10px var(--c-glow), 0 0 18px rgba(9, 22, 9, 0.9), 0 1px 2px rgba(0, 0, 0, 0.75); } .crystal-caption__name { font-family: var(--font-display); font-size: 0.95rem; color: var(--primary); line-height: 1.15; text-shadow: 0 0 12px color-mix(in srgb, var(--c-glow) 80%, transparent), 0 0 1px rgba(0, 0, 0, 0.9); max-width: 160px; } .crystal-caption__type { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--c-light) 65%, var(--on-surface-muted) 35%); opacity: 0.8; } .crystal-caption--common .crystal-caption__name { font-size: 0.82rem; } .crystal-caption--legendary .crystal-caption__name { font-size: 1.15rem; letter-spacing: 0.01em; } .crystal-caption.is-hovered, .crystal-caption:hover, .crystal-caption:focus-visible { filter: brightness(1.25); z-index: 10; } .crystal-caption:focus-visible { outline: none; filter: brightness(1.4) drop-shadow(0 0 8px var(--c-glow)); } /* ============================================================ ZERO INSPECTION MARKS · Crystal plane -------------------------------------------------------------- The crystals must show only the rendered visuals. No outlines, focus rings, debug rectangles, dev grids, tap flashes, drag-select rectangles, browser highlights, or any user-agent-injected indicator. ============================================================ */ #crystal-canvas, #crystal-canvas:hover, #crystal-canvas:focus, #crystal-canvas:focus-visible, #crystal-canvas:active, #crystal-overlay, #crystal-overlay *, .crystal-caption, .crystal-caption *, .memories, .memories *, .memories *::before, .memories *::after { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; -webkit-user-drag: none; outline: none !important; outline-offset: 0 !important; -webkit-appearance: none; appearance: none; } #crystal-canvas, #crystal-overlay { border: 0 !important; box-shadow: none !important; background: transparent; } /* Block native text-selection rectangles so a stray drag never draws an inspection-style box over the gems. The lede paragraph re-enables selection below. */ .memories, .memories *, #crystal-overlay, #crystal-overlay * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .memories ::selection { background: transparent; color: inherit; } .memories ::-moz-selection { background: transparent; color: inherit; } /* Re-enable selection just for the explanatory prose */ .memories__head .memories__lede, .memories__head .memories__eyebrow { user-select: text; -webkit-user-select: text; } /* Legacy .crystal card styles removed — 3D WebGL replaces them */ .loader-rune { display: block; width: 28px; height: 28px; border: 1px solid var(--gold); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes crystal-float { 0%, 100% { transform: translateY(0) rotate(-0.4deg); } 50% { transform: translateY(-7px) rotate(0.4deg); } } @keyframes orbit-spin { to { transform: rotate(360deg); } } /* "Como Funciona" floating info card removed at user request (June 2026) — its DOM