/* Opening animation + loading veil. Brand: warm paper, dusty rose, peach, charcoal, terracotta, thin gold. */
.intro, .veil { display: none; }
html.intro-on .intro { display: block; }
html.veil-on .veil { display: flex; }
html.intro-on body, html.intro-on { overflow: hidden; }

.intro {
  --paper:#faf6f1; --beige:#efe5d9; --rose:#e9cfc6; --peach:#f7dcc6; --ink:#2e2a27; --accent:#b25e3d; --gold:#b8945a;
  position: fixed; inset: 0; z-index: 9000; overflow: hidden; background: var(--paper);
  font-family: "Poppins", system-ui, sans-serif; font-weight: 300; color: var(--ink);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.intro * { box-sizing: border-box; } .intro [hidden] { display: none !important; }
.intro img { display: block; -webkit-user-drag: none; pointer-events: none; }

/* --- Backdrop: the gate sits on a soft, dimmed copy of their cover photo --- */
.in-photo { position: absolute; inset: -6%; will-change: opacity; }
.in-photo img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.68) saturate(1.15); transform: scale(1.06); }
.in-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(40,28,22,0) 0%, rgba(40,28,22,.34) 100%); }

/* --- Warm paper with slow colour blobs (what the glass refracts) --- */
.in-paper { position: absolute; inset: 0; opacity: 0; will-change: opacity; background: linear-gradient(160deg, #fbf7f2 0%, #f3e8dc 100%); }
.in-paper b { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.in-paper .a { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, rgba(233,207,198,.95), rgba(233,207,198,0) 65%); }
.in-paper .b { width: 54vmax; height: 54vmax; right: -16vmax; bottom: -22vmax; background: radial-gradient(circle, rgba(247,200,166,.9), rgba(247,200,166,0) 65%); }
.in-paper .c { width: 34vmax; height: 34vmax; left: 38%; top: 30%; background: radial-gradient(circle, rgba(184,148,90,.22), rgba(184,148,90,0) 65%); }
.in-ghost { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.in-ghost img { position: absolute; width: 70vmax; height: 50vmax; object-fit: cover; border-radius: 50%; filter: blur(64px) saturate(1.3); opacity: .38; will-change: transform; }

/* --- Glass photo cards --- */
.in-track { position: absolute; inset: 0; perspective: 1400px; }
.in-card {
  position: absolute; left: 0; top: 0; padding: 10px; border-radius: 28px; opacity: 0; will-change: transform, opacity, filter;
  background: linear-gradient(145deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 55%, rgba(255,255,255,.4) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 36px 60px -28px rgba(92,58,38,.42), 0 10px 24px -12px rgba(92,58,38,.22), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  overflow: hidden;
}
.in-card .ph { position: relative; width: 100%; height: 100%; border-radius: 19px; overflow: hidden; background: var(--beige); }
.in-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.in-card .spec { position: absolute; inset: -10% -60%; width: 220%; pointer-events: none; will-change: transform;
  background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 56%); mix-blend-mode: soft-light; opacity: .9; }

/* --- Final cover that grows into the real page header --- */
.in-fin { position: absolute; left: 0; top: 0; overflow: hidden; opacity: 0; will-change: opacity; background: var(--beige); }
.in-fin img { width: 100%; height: 100%; object-fit: cover; }
.in-fin i { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(28,25,23,.28) 0%,rgba(28,25,23,0) 35%,rgba(28,25,23,.62) 100%); }

/* --- Text --- */
.in-text { position: absolute; inset: 0; padding: 0 24vw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; will-change: opacity, transform; }
.in-eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; color: #776c64; display: flex; align-items: center; justify-content: center; gap: 14px; }
.in-eyebrow::after { content: ""; width: calc(var(--lw, 0) * 44px); height: 1px; background: var(--gold); flex: none; }
.in-eyebrow::before { content: ""; width: calc(var(--lw, 0) * 44px); height: 1px; background: var(--gold); flex: none; transform-origin: left; }
.in-eyebrow span { display: inline-block; will-change: transform, opacity; }
.in-names { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(38px, 5.4vw, 92px); line-height: 1.02; letter-spacing: -.012em; }
.in-names .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin-right: .1em; }
.in-names .w > span { display: inline-block; will-change: transform, opacity, filter; }
.in-names .amp { font-style: italic; color: var(--accent); }
.in-meta { margin: 16px 0 0; font-size: 14px; color: #776c64; letter-spacing: .02em; }
.in-meta span { display: inline-block; will-change: transform, opacity; }

/* --- Gate: the first thing a client sees --- */
.in-gate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; will-change: opacity; }
.in-glass {
  width: min(440px, 100%); padding: 36px 30px 30px; text-align: center; color: #fff; border-radius: 34px; will-change: transform, opacity, filter;
  background: linear-gradient(150deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.18) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 50px 90px -30px rgba(20,12,8,.55), inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.18);
  animation: inRise 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes inRise { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
.in-ring { position: relative; width: 104px; height: 104px; margin: 0 auto 22px; }
.in-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.in-ring circle { fill: none; stroke-width: 1.2; }
.in-ring .trk { stroke: rgba(255,255,255,.28); }
.in-ring .bar { stroke: #e8cf9f; stroke-linecap: round; stroke-dasharray: 351.9; stroke-dashoffset: 351.9; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1); }
.in-ring img { position: absolute; inset: 22px; width: 60px; height: 60px; object-fit: contain; filter: brightness(0) invert(1); opacity: .96; }
.in-g-eyebrow { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; opacity: .8; }
.in-g-names { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(30px, 8vw, 40px); line-height: 1.08; text-shadow: 0 1px 14px rgba(20,12,8,.25); }
.in-g-meta { margin: 10px 0 26px; font-size: 13px; opacity: .85; }
.in-open {
  display: block; width: 100%; padding: 16px 20px; background: var(--accent); color: #fff; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400;
  border-radius: 999px; transition: background .2s, opacity .3s, transform .2s; box-shadow: 0 12px 26px -10px rgba(120,50,22,.7), inset 0 1px 0 rgba(255,255,255,.3);
}
.in-open:disabled { background: rgba(255,255,255,.2); box-shadow: none; cursor: default; opacity: .85; }
.in-open:not(:disabled):hover { background: #97492c; transform: translateY(-1px); }
.in-quiet { margin-top: 16px; font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); }
.in-quiet:hover { color: #fff; }
.in-open:focus-visible, .in-quiet:focus-visible, .in-skip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.in-skip {
  position: absolute; z-index: 5; right: clamp(16px, 3vw, 36px); bottom: clamp(18px, 3.5vh, 36px); padding: 11px 20px; border-radius: 999px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; color: var(--ink);
  background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.8); transition: background .2s;
}
.in-skip:hover { background: rgba(255,255,255,.8); }
.in-skip:focus-visible { outline-color: var(--accent); }

/* --- Loading veil (when the opening isn't shown): monogram + hairline, gone as soon as the cover is ready --- */
.veil { position: fixed; inset: 0; z-index: 9000; align-items: center; justify-content: center; flex-direction: column; background: #faf6f1; transition: opacity .7s cubic-bezier(.2,.8,.2,1), visibility .7s; }
.veil.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.veil img { width: 92px; height: auto; animation: veilBreathe 2.4s ease-in-out infinite; }
.veil i { display: block; width: 92px; height: 1px; margin-top: 22px; background: linear-gradient(90deg, transparent, #b8945a, transparent); transform-origin: center; animation: veilLine 2.4s ease-in-out infinite; }
@keyframes veilBreathe { 0%,100% { opacity: .55; transform: scale(.985); } 50% { opacity: 1; transform: scale(1); } }
@keyframes veilLine { 0%,100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

/* Page header text eases in once the opening hands over */
body.intro-handover .cover-text > *, body.intro-handover .cover-logo { animation: inHand 1s cubic-bezier(.2,.8,.2,1) both; }
body.intro-handover .cover-text > *:nth-child(2) { animation-delay: .12s; }
@keyframes inHand { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .in-glass { padding: 30px 22px 24px; border-radius: 30px; }
  .in-ring { width: 92px; height: 92px; margin-bottom: 18px; }
  .in-ring img { inset: 19px; width: 54px; height: 54px; }
  .in-card { padding: 8px; border-radius: 24px; }
  .in-card .ph { border-radius: 17px; }
  .in-text { padding: 0 22px clamp(64px, 11vh, 110px); justify-content: flex-end; }
  .in-names { font-size: clamp(34px, 10vw, 52px); }
}
@media (prefers-reduced-motion: reduce) { .veil img, .veil i, .in-glass { animation: none; } }