/* door2.pt — generative graphics (shared by the site and the back-office).
   Colours follow the brand: ink and cobalt; neon only for the one lit line. */

/* Handwriting landscape */
.gx-hand { display: block; width: 100%; height: 100%; }
.gx-hand-text { font-family: var(--font-display); font-style: italic; fill: var(--ink); opacity: .55; letter-spacing: -.01em; }
.gx-hand-thread { fill: none; stroke: var(--ink); stroke-width: .7; stroke-linecap: round; opacity: .28; }

/* Crowd and threads */
.gx-crowd { display: block; width: 100%; height: auto; overflow: hidden; }
.gx-crowd-ground { fill: var(--surface-300); }
.gx-person { fill: var(--ink); }
.gx-person.is-lit { fill: var(--cobalt); }
.gx-thread { fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3,.1,.2,1); }
.gx-thread--straight { stroke-width: 1.1; opacity: .75; }
.is-in .gx-thread { stroke-dashoffset: 0; }
.is-in .gx-thread:nth-child(3n) { transition-delay: .3s; }
.is-in .gx-thread:nth-child(3n+1) { transition-delay: .6s; }

/* Fanned phrase */
.gx-fan { display: block; width: 100%; height: auto; overflow: visible; }
.gx-fan-text { font-family: var(--font-mono); font-size: 17px; fill: var(--ink); opacity: .85; }
.gx-fan-text:nth-child(4n) { opacity: .5; }

/* Dot matrix */
.gx-dots { display: block; width: 100%; height: auto; }
.gx-dots circle { fill: var(--cobalt); transition: r .6s ease, opacity .6s ease; }

/* The letter: a printed poster, cream paper, crimson brushwork */
.gx-letter { display: block; width: 100%; height: auto; --crimson: color-mix(in oklab, var(--coral) 35%, #a3121f); }
.gx-letter-text text { font-family: Georgia, "Times New Roman", serif; font-size: 5.9px; fill: #23201c; }
.gx-letter-head { font-family: Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: .28em; fill: var(--crimson); }
.gx-letter-paint path { fill: none; stroke: var(--crimson); stroke-linecap: round; stroke-linejoin: round; opacity: .93; mix-blend-mode: multiply;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.4,.1,.2,1); transition-delay: calc(var(--n) * 7ms); }
.gx-letter-paint path.is-deep { stroke: color-mix(in oklab, var(--crimson) 70%, #3d0508); }
.gx-letter-paint path.is-light { stroke: color-mix(in oklab, var(--crimson) 75%, var(--coral)); opacity: .7; }
.gx-letter-paint path.is-thin { opacity: .6; }
.is-in .gx-letter-paint path { stroke-dashoffset: 0; }

/* Patchwork */
.gx-patch { display: block; width: 100%; height: 100%; }
.gx-patch-tile { fill: var(--surface-200); stroke: var(--hairline); stroke-width: 1; }
.gx-patch-bar { fill: var(--ink); }
.gx-patch-disc { fill: var(--cobalt); }

@media (prefers-reduced-motion: reduce) {
  .gx-thread, .gx-letter-paint path, .gx-dots circle { transition: none; }
}

/* Wordmark: Door2Portugal in Fraunces, the "2" in cobalt italic */
:root { --font-brand: "Fraunces", "Instrument Serif", Georgia, serif; }
.d2-wordmark { align-items: center; gap: .4em; font-family: var(--font-brand); font-weight: 600; font-variation-settings: "opsz" 72, "SOFT" 50; letter-spacing: -.025em; }
.d2-wordmark-text { line-height: 1; white-space: nowrap; }
.d2-wordmark-two { color: var(--cobalt); font-style: italic; font-weight: 500; margin: 0 .02em; }

/* Page-wide crowd threads */
.gx-threads { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

/* Ink blooms */
.gx-bloom { display: block; width: 100%; height: 100%; }
.gx-bloom-halo { fill: #8e9bd0; opacity: .32; }
.gx-bloom-deep { fill: #070d30; opacity: .85; }
.gx-bloom-vein { fill: none; stroke: #5161a8; stroke-width: 1; opacity: .18; }
.gx-bloom-rose { fill: #d93a6f; opacity: .7; }
.gx-bloom-branch { fill: none; stroke: #d93a6f; stroke-width: 2; stroke-linecap: round; }

/* Glass rods over the blooms */
.gx-rods { position: absolute; left: 50%; top: 50%; width: min(64%, 420px); aspect-ratio: 1; transform: translate(-50%, -46%); }
.gx-rod { position: absolute; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(255,255,255,.14)); border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(5px) saturate(1.6); backdrop-filter: blur(5px) saturate(1.6);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(255,255,255,.3), 0 10px 30px rgba(14,31,102,.12); }
.gx-rod.is-leaf { background: var(--neon); border-color: transparent; box-shadow: var(--shadow-neon); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Coral: the warm partner to cobalt (graphics only; text uses --coral-ink) ---------- */
:root, [data-theme="light"] { --coral: #ff6f5e; --coral-soft: #ffc4b5; --coral-ink: #b8382a; }
[data-theme="dark"] { --coral: #ff8a78; --coral-soft: #5a2420; --coral-ink: #ff9a8a; }
.d2-orb--coral { background: radial-gradient(circle at 50% 50%, var(--coral-soft) 0%, transparent 70%); }
.gx-person.is-lit.is-coral { fill: var(--coral); }
.gx-thread.is-coral { stroke: var(--coral); }
.gx-hand-text.is-coral { fill: var(--coral); opacity: .75; }
.gx-hand-text.is-cobalt { fill: var(--cobalt); opacity: .6; }
.gx-fan-text.is-coral { fill: var(--coral); opacity: 1; }
.gx-patch-disc { fill: var(--coral); }

/* ---------- Hero door (the mark, big, in glass) ---------- */
.gx-rods--hero { position: relative; left: auto; top: auto; transform: none; width: 100%; --open: 0; }
.gx-rods--hero .gx-rod { transform-origin: bottom center; animation: rod-rise 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--k) * 55ms + 150ms);
  translate: calc(var(--side) * var(--open) * (var(--k) + 2) * 7%) 0; transition: translate .25s linear; }
.gx-rods--hero .gx-rod.is-leaf { animation: leaf-in 1.4s cubic-bezier(.2,.8,.2,1) 1.1s both; rotate: calc(1.5deg + var(--open) * 10deg); translate: none; }
.gx-rods--hero.is-static .gx-rod { animation: none; }
@keyframes rod-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes leaf-in { 0% { transform: scaleY(0); opacity: 0; box-shadow: none; } 60% { transform: scaleY(1); opacity: 1; box-shadow: none; } 100% { transform: scaleY(1); opacity: 1; box-shadow: var(--shadow-neon); } }

/* Wordmark: Door2Portugal in Schibsted Grotesk 700 - bold, a step lighter than the 800 titles, tightly set */
.d2-wordmark, .hero-brand { font-family: var(--font-sans); font-weight: 700; font-variation-settings: normal; letter-spacing: -.045em; }
.d2-wordmark-two, .hero-brand .hb-2, .hero-brand .hb-to { font-style: italic; font-weight: 700; }
.d2-wordmark-two { margin: 0 .03em 0 -.01em; }
.hero-brand .hb-to { letter-spacing: -.02em; }