/* ============================================================
   Transform · the Town Portal between the glass site and the
   alter ego (js/transform.js builds the overlay; this file styles it).
   Original ornament only: a gold sigil, particles, cracks of light,
   dark stone by day and navy by night.
   ============================================================ */

/* Both sites opt in to cross document view transitions. transform.js keeps
   the transformation's, skips any other glass ⇄ alter ego navigation and
   leaves navigations inside one site to that site. */
@view-transition { navigation: auto; }

/* During ours, no page element travels on its own and the page level
   animation is a short crossfade between two matching frames. */
html.tf-arrive *, html.tf-leaving * { view-transition-name: none !important; }
html.tf-vt:not(.tf-x)::view-transition-group(root) { animation-duration: .18s; }
html.tf-vt:not(.tf-x)::view-transition-old(root) { animation: tf-vt-out .18s linear both; mix-blend-mode: plus-lighter; transform: none; filter: none; }
html.tf-vt:not(.tf-x)::view-transition-new(root) { animation: tf-vt-in .18s linear both; mix-blend-mode: plus-lighter; outline: 0; border-radius: 0; transform: none; }
@keyframes tf-vt-out { to { opacity: 0; } }
@keyframes tf-vt-in { from { opacity: 0; } }

/* ---------- Shared looks ---------- */
:root {
  --tf-base-day: radial-gradient(90% 75% at 50% 48%, #2a2219 0%, #15120e 52%, #08090b 100%);
  --tf-base-night: radial-gradient(90% 75% at 50% 48%, #172a57 0%, #0b1736 52%, #050a18 100%);
  --tf-crest-glow: radial-gradient(closest-side, rgb(240 200 120 / .30), rgb(240 200 120 / .10) 55%, rgb(240 200 120 / 0));
  --tf-crest-glow-night: radial-gradient(closest-side, rgb(130 160 240 / .26), rgb(90 120 220 / .10) 55%, rgb(90 120 220 / 0));
  --tf-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g)'%3E%3Cg data-sg='a' fill='none' stroke='%23F0D89C'%3E%3Ccircle r='95' stroke-width='1.4'/%3E%3Ccircle r='89' stroke-width='.6' opacity='.7'/%3E%3Cpath d='M7.67 -87.67L7.36 -84.18M15.28 -86.66L14.67 -83.22M22.78 -85.00L21.87 -81.62M30.10 -82.69L28.90 -79.40M37.19 -79.76L35.71 -76.58M50.47 -72.09L48.47 -69.22M56.57 -67.41L54.32 -64.73M62.23 -62.23L59.75 -59.75M67.41 -56.57L64.73 -54.32M72.09 -50.47L69.22 -48.47M79.76 -37.19L76.58 -35.71M82.69 -30.10L79.40 -28.90M85.00 -22.78L81.62 -21.87M86.66 -15.28L83.22 -14.67M87.67 -7.67L84.18 -7.36M87.67 7.67L84.18 7.36M86.66 15.28L83.22 14.67M85.00 22.78L81.62 21.87M82.69 30.10L79.40 28.90M79.76 37.19L76.58 35.71M72.09 50.47L69.22 48.47M67.41 56.57L64.73 54.32M62.23 62.23L59.75 59.75M56.57 67.41L54.32 64.73M50.47 72.09L48.47 69.22M37.19 79.76L35.71 76.58M30.10 82.69L28.90 79.40M22.78 85.00L21.87 81.62M15.28 86.66L14.67 83.22M7.67 87.67L7.36 84.18M-7.67 87.67L-7.36 84.18M-15.28 86.66L-14.67 83.22M-22.78 85.00L-21.87 81.62M-30.10 82.69L-28.90 79.40M-37.19 79.76L-35.71 76.58M-50.47 72.09L-48.47 69.22M-56.57 67.41L-54.32 64.73M-62.23 62.23L-59.75 59.75M-67.41 56.57L-64.73 54.32M-72.09 50.47L-69.22 48.47M-79.76 37.19L-76.58 35.71M-82.69 30.10L-79.40 28.90M-85.00 22.78L-81.62 21.87M-86.66 15.28L-83.22 14.67M-87.67 7.67L-84.18 7.36M-87.67 -7.67L-84.18 -7.36M-86.66 -15.28L-83.22 -14.67M-85.00 -22.78L-81.62 -21.87M-82.69 -30.10L-79.40 -28.90M-79.76 -37.19L-76.58 -35.71M-72.09 -50.47L-69.22 -48.47M-67.41 -56.57L-64.73 -54.32M-62.23 -62.23L-59.75 -59.75M-56.57 -67.41L-54.32 -64.73M-50.47 -72.09L-48.47 -69.22M-37.19 -79.76L-35.71 -76.58M-30.10 -82.69L-28.90 -79.40M-22.78 -85.00L-21.87 -81.62M-15.28 -86.66L-14.67 -83.22M-7.67 -87.67L-7.36 -84.18' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 -88.00L0 -79.50M44.00 -76.21L39.75 -68.85M76.21 -44.00L68.85 -39.75M88.00 0L79.50 0M76.21 44.00L68.85 39.75M44.00 76.21L39.75 68.85M0 88.00L0 79.50M-44.00 76.21L-39.75 68.85M-76.21 44.00L-68.85 39.75M-88.00 0L-79.50 0M-76.21 -44.00L-68.85 -39.75M-44.00 -76.21L-39.75 -68.85' stroke-width='1.6'/%3E%3C/g%3E%3Cg data-sg='b'%3E%3Ccircle r='73' fill='none' stroke='%23F0D89C' stroke-width='1.5' stroke-dasharray='15 4 3 4'/%3E%3Ccircle r='67' fill='none' stroke='%23F0D89C' stroke-width='.6' opacity='.6'/%3E%3Cg fill='%23F0D89C'%3E%3Cpath d='M0 -77.20L3.00 -73.00L0 -68.80L-3.00 -73.00Z' transform='rotate(0 0 -73.00)'/%3E%3Cpath d='M63.22 -40.70L66.22 -36.50L63.22 -32.30L60.22 -36.50Z' transform='rotate(60 63.22 -36.50)'/%3E%3Cpath d='M63.22 32.30L66.22 36.50L63.22 40.70L60.22 36.50Z' transform='rotate(120 63.22 36.50)'/%3E%3Cpath d='M0 68.80L3.00 73.00L0 77.20L-3.00 73.00Z' transform='rotate(180 0 73.00)'/%3E%3Cpath d='M-63.22 32.30L-60.22 36.50L-63.22 40.70L-66.22 36.50Z' transform='rotate(240 -63.22 36.50)'/%3E%3Cpath d='M-63.22 -40.70L-60.22 -36.50L-63.22 -32.30L-66.22 -36.50Z' transform='rotate(300 -63.22 -36.50)'/%3E%3C/g%3E%3C/g%3E%3Cg data-sg='c' fill='none' stroke='%23F0D89C' stroke-width='1'%3E%3Crect x='-47' y='-47' width='94' height='94'/%3E%3Crect x='-47' y='-47' width='94' height='94' transform='rotate(45)'/%3E%3Ccircle r='47' stroke-width='.7' opacity='.7'/%3E%3C/g%3E%3Cg data-sg='d' fill='none' stroke='%23F0D89C'%3E%3Ccircle r='27' stroke-width='1.3'/%3E%3Cg stroke-width='.8' opacity='.85'%3E%3Ccircle cx='6.75' cy='-11.69' r='13.5'/%3E%3Ccircle cx='13.50' cy='0' r='13.5'/%3E%3Ccircle cx='6.75' cy='11.69' r='13.5'/%3E%3Ccircle cx='-6.75' cy='11.69' r='13.5'/%3E%3Ccircle cx='-13.50' cy='0' r='13.5'/%3E%3Ccircle cx='-6.75' cy='-11.69' r='13.5'/%3E%3C/g%3E%3Ccircle r='4.5' fill='%23F0D89C' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Pre-cover for the first frames of an arrival, before the overlay exists
   (the pages add these classes from an inline <head> script). Matches the
   overlay's first frame. */
html.tf-arrive--alter::after,
html.tf-arrive--glass::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482999; pointer-events: none;
}
html.tf-arrive--alter::after {
  --tf-crest: clamp(200px, 36vmin, 340px);
  background: var(--tf-sigil) center / var(--tf-crest) var(--tf-crest) no-repeat, var(--tf-crest-glow) center / calc(var(--tf-crest) * 1.9) calc(var(--tf-crest) * 1.9) no-repeat, var(--tf-base-day);
}
html.dark.tf-arrive--alter::after, html.tf-night.tf-arrive--alter::after {
  background: var(--tf-sigil) center / var(--tf-crest) var(--tf-crest) no-repeat, var(--tf-crest-glow-night) center / calc(var(--tf-crest) * 1.9) calc(var(--tf-crest) * 1.9) no-repeat, var(--tf-base-night);
}
html.tf-arrive--glass::after { background: radial-gradient(120% 90% at 50% 38%, #E9EDF7, #C3CBE0); }
html.dark.tf-arrive--glass::after { background: radial-gradient(120% 90% at 50% 38%, #262A3D, #0C0D16); }

/* ---------- Overlay ---------- */
.tf {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: auto; cursor: progress;
  contain: strict; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  /* same type on both sites: nothing inherited from the page */
  font: 400 16px/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  letter-spacing: normal; text-transform: none; text-align: left; direction: ltr;
}
.tf.is-out { opacity: 0; transition: opacity calc(.28s * var(--tf-k, 1)) ease; pointer-events: none; }
.tf-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.tf-live {
  position: fixed; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The element that asked for it gets a small press */
.tf-press { animation: tf-press calc(.42s * var(--tf-k, 1)) cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tf-press { 0% { scale: 1; } 28% { scale: .88; } 64% { scale: 1.05; } 100% { scale: 1; } }

/* ---------- The world blurs and darkens behind the channel ---------- */
.tf-veil {
  position: absolute; inset: 0; opacity: 0;
  -webkit-backdrop-filter: blur(14px) saturate(.7) brightness(.92);
  backdrop-filter: blur(14px) saturate(.7) brightness(.92);
}
.tf-dim { position: absolute; inset: 0; opacity: 0; background: #120d07; }
.tf.is-night .tf-dim { background: #040a1f; }

/* ---------- The sigil ---------- */
.tf-sigil { display: block; width: 100%; height: 100%; overflow: visible; color: #F0D89C; }
.tf-ground { position: absolute; left: 0; top: 0; width: 200px; height: 200px; opacity: 0; perspective: 820px; pointer-events: none; }
.tf-ground__tilt { width: 100%; height: 100%; transform-origin: 50% 50%; transform: rotateX(64deg) scale(.25); will-change: transform; }
.tf-sigil--ground { filter: drop-shadow(0 0 3px rgb(255 222 150 / .95)) drop-shadow(0 0 12px rgb(240 184 90 / .7)); }
.tf.is-night .tf-sigil--ground { filter: drop-shadow(0 0 3px rgb(255 232 180 / .95)) drop-shadow(0 0 12px rgb(170 200 255 / .55)); }

/* Destination frame on the way in: dark stone by day, navy by night, the sigil at rest */
.tf-base { position: absolute; inset: 0; opacity: 0; background: var(--tf-base-day); }
.tf.is-night .tf-base { background: var(--tf-base-night); }
.tf-crest {
  --tf-crest: clamp(200px, 36vmin, 340px);
  position: absolute; left: 50%; top: 50%; width: var(--tf-crest); height: var(--tf-crest);
  transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity;
}
.tf-crest__glow {
  position: absolute; inset: -45%; background: var(--tf-crest-glow);
  transform: scale(calc(1 + var(--tf-flare, 0) * .3)); opacity: calc(1 + var(--tf-flare, 0));
}
.tf.is-night .tf-crest__glow { background: var(--tf-crest-glow-night); }
.tf-sigil--crest { position: relative; filter: drop-shadow(0 0 2px rgb(240 216 156 / .8)); }
.tf--at-alter .tf-base, .tf--at-alter .tf-crest, .tf--rm-alter .tf-base, .tf--rm-alter .tf-crest { opacity: 1; }
.tf--at-alter { pointer-events: none; }

/* ---------- Channel bar (a cast bar over the button) ---------- */
.tf-channel {
  position: absolute; left: 50%; top: var(--by, 70%);
  width: min(296px, calc(100vw - 48px)); box-sizing: border-box;
  display: grid; gap: 8px; padding: 12px 16px 16px;
  border-radius: 6px; opacity: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgb(28 26 24 / .92), rgb(14 13 12 / .94));
  box-shadow: 0 0 0 1px rgb(0 0 0 / .8), 0 0 0 2px rgb(138 106 63 / .9), inset 0 1px 0 rgb(255 240 200 / .12), 0 16px 40px -12px rgb(0 0 0 / .7);
}
.tf.is-night .tf-channel { background: linear-gradient(180deg, rgb(18 28 56 / .92), rgb(8 14 32 / .95)); }
.tf-channel::before, .tf-channel::after { /* bronze corner studs */
  content: ""; position: absolute; top: -4px; width: 8px; height: 8px; transform: rotate(45deg);
  background: linear-gradient(135deg, #f0d89c, #8a6a3f); box-shadow: 0 0 0 1px rgb(0 0 0 / .7);
}
.tf-channel::before { left: -4px; }
.tf-channel::after { right: -4px; }
.tf-channel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }
.tf-channel__label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13px/16px 'Cinzel', 'Marcellus', Georgia, 'Times New Roman', serif; letter-spacing: .14em; text-transform: uppercase;
  color: #F0D89C; text-shadow: 0 1px 2px rgb(0 0 0 / .8);
}
.tf-channel__time {
  flex: none; font: 500 12px/16px 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums;
  color: rgb(236 229 211 / .78);
}
.tf-channel__track {
  display: block; height: 12px; padding: 1px; box-sizing: border-box; border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, #07080a, #16140f);
  box-shadow: 0 0 0 1px rgb(91 67 38 / .95), inset 0 1px 2px rgb(0 0 0 / .8);
}
.tf-channel__fill {
  display: block; height: 100%; border-radius: 1px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(180deg, #fff1c4 0%, #e6b457 55%, #9c6a1f 100%);
  box-shadow: 0 0 10px rgb(255 205 110 / .7);
}
.tf.is-night .tf-channel__fill { background: linear-gradient(180deg, #ffffff 0%, #bcd6ff 45%, #6d8fd6 100%); box-shadow: 0 0 10px rgb(170 200 255 / .75); }

/* ---------- Back to base: glass fog + glass card ---------- */
.tf-fog {
  position: absolute; inset: 0; opacity: 0;
  -webkit-backdrop-filter: blur(38px) saturate(1.5);
  backdrop-filter: blur(38px) saturate(1.5);
}
.tf--to-glass .tf-fog { transition: opacity calc(.36s * var(--tf-k, 1)) cubic-bezier(.4, 0, .2, 1); }
.tf-fog.is-on { opacity: 1; }
.tf-fog__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgb(255 255 255 / .5), transparent 70%),
    radial-gradient(120% 90% at 50% 38%, rgb(233 237 247 / .8), rgb(195 203 224 / .9));
}
.tf.is-night .tf-fog__tint {
  background:
    radial-gradient(70% 55% at 50% 42%, rgb(120 130 170 / .18), transparent 70%),
    radial-gradient(120% 90% at 50% 38%, rgb(38 42 61 / .84), rgb(12 13 22 / .94));
}
/* Dense fog: the last frames before the page swap (and the first after) hide
   the page behind almost completely, so snapshots that skip backdrop blur
   (WebKit view transition captures) still match. */
.tf-fog__tint::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 38%, #E9EDF7, #C3CBE0);
  transition: opacity calc(.3s * var(--tf-k, 1)) ease;
}
.tf.is-night .tf-fog__tint::after { background: radial-gradient(120% 90% at 50% 38%, #262A3D, #0C0D16); }
.tf.is-dense .tf-fog__tint::after { opacity: .9; }
.tf--at-glass .tf-fog__tint::after { opacity: .9; transition: opacity calc(.5s * var(--tf-k, 1)) ease; }
.tf--at-glass.is-clear .tf-fog__tint::after { opacity: 0; }
.tf--rm-glass .tf-fog__tint::after { opacity: .9; }
.tf-fog__sheen {
  position: absolute; inset: -30% -60%; opacity: 0;
  background: linear-gradient(104deg, transparent 42%, rgb(255 255 255 / .34) 49%, rgb(255 255 255 / .06) 53%, transparent 58%);
  transform: translateX(-38%);
}
.tf.is-night .tf-fog__sheen { background: linear-gradient(104deg, transparent 42%, rgb(255 255 255 / .12) 49%, rgb(255 255 255 / .03) 53%, transparent 58%); }
.tf--to-glass .tf-fog.is-on .tf-fog__sheen { animation: tf-sheen calc(.9s * var(--tf-k, 1)) calc(.12s * var(--tf-k, 1)) cubic-bezier(.45, 0, .25, 1) both; }
@keyframes tf-sheen { 0% { opacity: 0; transform: translateX(-38%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(38%); } }

.tf-card {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 32px 16px 16px; border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif; /* same metrics on both pages, no web font wait */
  color: #111318; text-align: left; white-space: nowrap;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: rgb(255 255 255 / .38);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 30px 70px -24px rgb(26 30 52 / .42), 0 2px 8px -2px rgb(26 30 52 / .12), inset 0 1px 0 rgb(255 255 255 / .75), inset 0 0 0 1px rgb(255 255 255 / .42);
  transform: translate(-50%, -50%) scale(.92); opacity: 0; filter: blur(10px);
  transition: transform calc(.62s * var(--tf-k, 1)) cubic-bezier(.2, .9, .25, 1), opacity calc(.42s * var(--tf-k, 1)) ease, filter calc(.52s * var(--tf-k, 1)) ease;
}
.tf.is-night .tf-card {
  color: #F4F5F8; background: rgb(58 62 84 / .42);
  box-shadow: 0 30px 70px -24px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .12);
}
.tf-card.is-in, .tf--at-glass .tf-card, .tf--rm-glass .tf-card { transform: translate(-50%, -50%); opacity: 1; filter: none; }
.tf-card__rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgb(255 255 255 / .55), transparent 38%, transparent 70%, rgb(255 255 255 / .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: 1px;
}
.tf-card__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgb(255 255 255 / .7), 0 6px 16px -6px rgb(0 0 0 / .35); }
.tf-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-card__name, .tf-card__role { overflow: hidden; text-overflow: ellipsis; }
.tf-card__name { font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.tf-card__role { font-size: 16px; font-weight: 500; line-height: 1.2; color: rgb(17 19 24 / .66); }
.tf.is-night .tf-card__role { color: rgb(244 245 248 / .72); }
@media (max-width: 480px) {
  .tf-card { gap: 12px; padding: 12px 24px 12px 12px; }
  .tf-card__avatar { width: 56px; height: 56px; }
  .tf-card__name { font-size: 20px; }
  .tf-card__role { font-size: 14px; }
}

/* Glass arrival: the fog clears into focus */
.tf--at-glass .tf-fog { transition: opacity calc(1.1s * var(--tf-k, 1)) cubic-bezier(.5, 0, .2, 1) calc(.06s * var(--tf-k, 1)); }
.tf--at-glass .tf-fog__tint { transition: opacity calc(.8s * var(--tf-k, 1)) cubic-bezier(.4, 0, .2, 1); }
.tf--at-glass.is-clear .tf-fog { opacity: 0; }
.tf--at-glass.is-clear .tf-fog__tint { opacity: 0; }
.tf--at-glass .tf-card { transition: transform calc(.7s * var(--tf-k, 1)) cubic-bezier(.3, .7, .3, 1) calc(.12s * var(--tf-k, 1)), opacity calc(.5s * var(--tf-k, 1)) ease calc(.16s * var(--tf-k, 1)), filter calc(.5s * var(--tf-k, 1)) ease calc(.12s * var(--tf-k, 1)); }
.tf--at-glass.is-clear .tf-card { opacity: 0; transform: translate(-50%, calc(-50% - 16px)) scale(1.04); filter: blur(6px); }
.tf--at-glass.is-clear { pointer-events: none; }

/* ---------- Reduced motion: quick crossfades ---------- */
.tf--rm-alter, .tf--rm-glass { opacity: 0; transition: opacity calc(.22s * var(--tf-k, 1)) ease; }
.tf--rm-alter.is-in, .tf--rm-glass.is-in { opacity: 1; }
.tf--rm-glass .tf-card { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .tf-press { animation: none; }
}