@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/playfair-display-v4.woff2') format('woff2'); }
:root { color-scheme: dark; --ease: cubic-bezier(.22,.61,.36,1); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); }
body { color: var(--foreground); -webkit-font-smoothing: antialiased; }
::selection { background: #ffffff30; }
.stage { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 48px 24px; overflow: hidden; }
.field { position: absolute; display: block; z-index: -2; inset: 0; pointer-events: none; }
.field img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.stage::after { position: absolute; content: ''; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #11131526, #1113150d 45%, #11131540), radial-gradient(ellipse at center, transparent 20%, #1012144d); }
.lockup { position: relative; width: 100%; text-align: center; transform: translateY(-4svh); }
.wordmark { margin: 0; font: 400 clamp(44px, 3.8vw, 60px) / 1.1 Georgia, 'Times New Roman', serif; letter-spacing: .025em; }
.logo-frame { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.brand-logo { display: block; width: clamp(190px, 18vw, 260px); height: auto; max-width: 100%; margin: auto; opacity: .9; }
.logo-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mask: url('/assets/naelle-wordmark-v2.webp') center / 100% 100% no-repeat; -webkit-mask: url('/assets/naelle-wordmark-v2.webp') center / 100% 100% no-repeat; }
.logo-sheen::after { position: absolute; content: ''; inset: 0; opacity: 0; transform: translateX(-125%); background: linear-gradient(110deg, transparent 30%, #e9c68a30 40%, #fff4dbb3 49%, #e9c68a30 58%, transparent 68%); }
.headline { color: var(--foreground); margin: 12px auto 0; font: 400 clamp(16px, 1.25vw, 18px) / 1.5 'Playfair Display', Georgia, 'Times New Roman', serif; text-wrap: balance; max-width: 42rem; text-shadow: 0 2px 12px #00000050; }
.headline-copy { display: inline-block; vertical-align: top; max-width: 100%; }
.headline::after { content: ''; display: block; width: 42px; height: 1px; margin: 18px auto 0; opacity: .65; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
@media (max-width: 600px) { .headline { max-width: 23rem; } .field img { object-position: 48% center; } }
@media (prefers-reduced-motion: no-preference) {
  .logo-frame { animation: logo-materialize 3.8s var(--ease) both; }
  .headline-copy { animation: tagline-materialize 3.2s var(--ease) .9s both; }
  .logo-sheen::after { animation: gold-glint 4.8s var(--ease) 1.8s both; }
  .headline::after { animation: line-arrive 2.8s var(--ease) 2.3s both; }
  @keyframes logo-materialize { 0%, 10% { clip-path: circle(0% at 50% 50%); transform: scale(.88); } 100% { clip-path: circle(75% at 50% 50%); transform: none; } }
  @keyframes tagline-materialize { 0%, 10% { clip-path: inset(0 50% 0 50%); } 100% { clip-path: inset(0); } }
  @keyframes gold-glint { 0% { opacity: 0; transform: translateX(-125%); } 20%, 70% { opacity: .65; } 100% { opacity: 0; transform: translateX(125%); } }
  @keyframes line-arrive { from { opacity: 0; transform: scaleX(.2); } to { opacity: .65; transform: scaleX(1); } }
}