@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #0d0e0e; color: #deded9; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.teaser { isolation: isolate; min-height: 100svh; overflow: hidden; position: relative; display: grid; place-items: center; padding: 4rem 1.5rem 3.5rem; background: radial-gradient(ellipse 45% 40% at 50% 45%, #171918 0%, #101111 56%, #0a0b0b 100%); }
.grain { position: absolute; z-index: -1; inset: 0; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.tapestry { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.threads-visible .tapestry { opacity: 1; }
.threads { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease .1s; }
.threads-visible .threads { opacity: 1; }
.thread { fill: none; stroke: #c9a781; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 1; opacity: .19; animation: breathe 19s ease-in-out infinite alternate; }
.thread.warm { stroke: #d79262; opacity: .24; }.thread.muted { stroke: #cfc6b4; opacity: .13; }
.thread:nth-child(3n) { animation-delay: -9s; }.thread:nth-child(4n) { animation-delay: -14s; }
.knots circle { fill: #ddb27c; opacity: .45; filter: url(#soft-glow); transition: opacity .8s ease, r .8s ease; }.knots circle.active { opacity: 1; r: 6; }
.pulse-core { fill: #fff2d2; filter: url(#soft-glow); }.pulse-aura { fill: #d88958; opacity: .3; filter: url(#soft-glow); }
.brand,.message-block { width: min(calc(100% - 3rem), 42rem); position: absolute; z-index: 1; left: 50%; text-align: center; }
.brand { top: calc(clamp(4.5rem, 12vh, 7rem) - clamp(32px, 4vh, 48px)); transform: translateX(-50%); z-index: 2; }
.brand::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: clamp(23rem, 36vw, 31rem); aspect-ratio: 1.18 / 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse at center, rgba(5,7,10,.84) 0%, rgba(5,7,10,.68) 38%, rgba(5,7,10,.34) 60%, rgba(5,7,10,.1) 75%, transparent 88%); filter: blur(18px); }
.message-block { top: calc(50% + clamp(3.2rem, 8vh, 5.4rem) + 10px); transform: translateX(-50%); }
.logo { display: block; position: relative; z-index: 1; max-width: clamp(11.25rem, 18vw, 14.5rem); width: 100%; height: auto; margin: 0 auto; opacity: 0; transform: translateY(10px); transition: opacity 1.15s ease .35s, transform 1.15s ease .35s; }
.is-ready .logo { opacity: 1; transform: translateY(0); }
h1 { margin: 0; font-family: "Dancing Script", "Brush Script MT", "Segoe Script", "Apple Chancery", cursive; font-style: normal; font-weight: 700; font-size: clamp(2.85rem, 5.6vw, 4.65rem); line-height: 1.04; letter-spacing: -.018em; color: #FF7102; -webkit-text-stroke: .15px currentColor; text-shadow: 0 2px 10px #05070a, 0 0 26px rgba(255,113,2,.24); opacity: 0; transform: translateY(8px); transition: opacity .85s ease 1s, transform .85s ease 1s; }
.is-ready h1 { opacity: 1; transform: translateY(0); }
.copy { margin-top: clamp(2.6rem, 7vh, 4.6rem); opacity: 0; transform: translateY(7px); transition: opacity .9s ease 1.32s, transform .9s ease 1.32s; }
.message-block .copy { margin-top: clamp(1.7rem, 3.8vh, 2.8rem); }
.is-ready .copy { opacity: 1; transform: translateY(0); }
.copy p { margin: 0; font-size: clamp(1rem, 1.45vw, 1.08rem); line-height: 1.72; color: #c9c9c3; font-weight: 400; }
.copy .poetic { max-width: 40rem; margin-inline: auto; line-height: 1.75; color: #f0f0ec; text-wrap: balance; text-shadow: 0 1px 8px #05070a; }
.copy .weaving { margin-top: 1.55rem; color: #e81a34; font-weight: 600; letter-spacing: .022em; text-shadow: 0 0 14px rgba(232,26,52,.16); }
.copy .disciplines { margin-top: 1rem; color: #deded9; font-size: clamp(.82rem, 1.15vw, .94rem); letter-spacing: .025em; }
.disciplines span { color: #b89068; padding: 0 .18em; }
.domain { position: absolute; bottom: 1.65rem; margin: 0; color: #888a85; font-size: .75rem; letter-spacing: .12em; opacity: 0; transition: opacity .7s ease 1.6s; }
.is-ready .domain { opacity: 1; }
.network-review .logo { max-width: clamp(16.2rem, 25.8vw, 20.8rem); }
@keyframes breathe { to { transform: translate(5px, -4px); opacity: .3; } }
@keyframes drift { to { transform: translate(-5px, 5px); opacity: .26; } }
@media (max-width: 680px) { .teaser { padding: 2.5rem 1.2rem 3.2rem; background: radial-gradient(ellipse 78% 40% at 50% 42%, #171918 0%, #101111 56%, #0a0b0b 100%); } .brand { top: calc(clamp(2.4rem, 8vh, 4rem) - clamp(16px, 2vh, 24px)); } .brand::before { width: clamp(18rem, 92vw, 24rem); filter: blur(14px); } .message-block { top: calc(50% + 4.4rem + 10px); width: min(calc(100% - 2rem), 31rem); } .logo,.network-review .logo { width: clamp(13rem, 64vw, 15.25rem); max-width: none; margin-bottom: 0; } h1 { font-size: clamp(2.65rem, 13.5vw, 3.75rem); } .copy { margin-top: 2.15rem; } .copy p { line-height: 1.65; } .desktop-break { display: none; } .disciplines { max-width: 19rem; margin-left: auto !important; margin-right: auto !important; } .t5,.t6,.t7,.t10,.t12,.t13,.t16 { display: none; } .threads { width: 135%; left: -17.5%; } }
@media (max-height: 650px) and (min-width: 681px) { .teaser { padding-top: 2rem; padding-bottom: 2.6rem; } .content { transform: translateY(-.5rem) scale(.9); } .copy { margin-top: 2rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .threads,.logo,h1,.copy,.domain { opacity: 1; transform: none; } }