/* The finale: "Need a break?" and a living miniature of The Wild Less Traveled (js/portal/).
   Sits between the work index and the footer, on the page's edges (--edge-text / --edge) like
   Part 2 above it, and reads every look's tokens. Per-look accents key off html[data-direction],
   so they hold before the scene loads (and without it); the skin the miniature wears is mirrored
   on the section as data-portal-skin. The teleport veil is appended to <body> by portal.js. */

.portal {
  position: relative;
  padding: calc(112px * var(--u-space)) var(--edge) calc(72px * var(--u-space)) var(--edge-text);
  background: var(--work-bg);
  backdrop-filter: blur(var(--work-blur));
  -webkit-backdrop-filter: blur(var(--work-blur));
  color: var(--text);
  --portal-accent-text: color-mix(in srgb, var(--accent) 82%, var(--text));
  --portal-radius: calc(18px * var(--u-radius, 1));
}
html:not([data-work='hidden']) .portal {
  padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--measure)) / 2));
}
/* the footer keeps its measure when the index is published (base.css says .work + .site-footer) */
html:not([data-work='hidden']) .portal + .site-footer {
  max-width: none;
  padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--measure)) / 2));
}

.portal-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(40px * var(--u-space)) calc(64px * var(--u-space));
  align-items: center;
  max-width: var(--measure);
}
.portal-copy { display: grid; gap: calc(20px * var(--u-space)); align-content: center; }
.portal-kicker {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.portal-kicker::before {
  content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.6;
}
.portal-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(34px, 4.2vw, 62px) * var(--u-type)); line-height: calc(1.04 * var(--u-leading, 1));
  letter-spacing: -0.02em; color: var(--text); text-wrap: balance; max-width: 14ch;
}
.portal-title-2 { color: var(--text-2); }
.portal-lede {
  font-size: calc(17px * var(--u-type)); line-height: 1.55; color: var(--text-2); max-width: 40ch; text-wrap: pretty;
}
.portal-action { margin-top: calc(6px * var(--u-space)); }
.portal-cta {
  --cta-bg: var(--text); --cta-fg: var(--bg);
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px 20px 12px 22px;
  border-radius: 999px;
  background: var(--cta-bg); color: var(--cta-fg);
  font: 500 calc(15px * var(--u-type))/1.2 var(--font-body); letter-spacing: 0.005em;
  text-decoration: none;
  transition: transform calc(320ms * var(--u-motion, 1)) var(--ease-enter), background-color var(--dur-fast, 160ms), box-shadow calc(320ms * var(--u-motion, 1)) var(--ease-enter);
}
.portal-cta .portal-arrow { flex: none; transition: transform calc(420ms * var(--u-motion, 1)) cubic-bezier(0.34, 1.56, 0.64, 1); }
.portal-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--text) 60%, transparent); }
.portal-cta:hover .portal-arrow, .portal-cta:focus-visible .portal-arrow { transform: translateX(4px); }
.portal-cta:active { transform: translateY(0) scale(0.98); }
.portal-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── The miniature ──────────────────────────────────────────────────────────────────────── */
.portal-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: var(--portal-radius);
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  /* a soft pool for the miniature to stand on while it loads */
  background: radial-gradient(60% 34% at 50% 80%, color-mix(in srgb, var(--text) 7%, transparent), transparent 70%);
}
.portal-stage.is-grabbing { cursor: grabbing; }
/* Clear ground: a look's ambient layer (Swiss's reel numerals and section index, a constellation)
   fades out behind the miniature instead of reading through the glass */
.portal-stage::before {
  content: ''; position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--bg) 58%, color-mix(in srgb, var(--bg) 70%, transparent) 78%, transparent);
}
.portal-stage > * { z-index: 1; }
.portal-copy { position: relative; isolation: isolate; }
.portal-copy::before {
  content: ''; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--bg) 62%, color-mix(in srgb, var(--bg) 60%, transparent) 84%, transparent);
}
.portal-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity calc(700ms * var(--u-motion, 1)) var(--ease-enter), transform calc(900ms * var(--u-motion, 1)) var(--ease-enter);
}
.portal[data-portal-state='ready'] .portal-canvas { opacity: 1; transform: none; }
.portal[data-portal-state='ready'] .portal-canvas.is-dip { opacity: 0; transition-duration: 220ms; }

.portal-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
/* No JS (no data-portal-state yet), or no WebGL: the still for the theme */
.portal:not([data-portal-state]) .portal-poster--light,
.portal[data-portal-state='fallback'] .portal-poster--light { display: block; }
html[data-theme='dark'] .portal:not([data-portal-state]) .portal-poster--light,
html[data-theme='dark'] .portal[data-portal-state='fallback'] .portal-poster--light { display: none; }
html[data-theme='dark'] .portal:not([data-portal-state]) .portal-poster--dark,
html[data-theme='dark'] .portal[data-portal-state='fallback'] .portal-poster--dark { display: block; }

.portal-hint {
  position: absolute; left: 50%; bottom: 2%;
  transform: translate(-50%, 4px);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 400ms var(--ease-enter), transform 400ms var(--ease-enter);
}
.portal[data-portal-state='ready'] .portal-stage:hover .portal-hint { opacity: 1; transform: translate(-50%, 0); }
.portal[data-portal-touched] .portal-hint,
.portal[data-portal-teleport] .portal-hint { opacity: 0 !important; }
@media (hover: none) { .portal[data-portal-state='ready'] .portal-hint { opacity: 0.9; transform: translate(-50%, 0); } }

/* ── Narrow: copy, the miniature, then the action ───────────────────────────────────────── */
@media (max-width: 860px) {
  .portal { padding-top: calc(88px * var(--u-space)); padding-bottom: calc(48px * var(--u-space)); }
  .portal-inner { grid-template-columns: minmax(0, 1fr); gap: calc(20px * var(--u-space)); }
  .portal-copy { display: contents; }
  .portal-kicker { order: 1; } .portal-title { order: 2; } .portal-lede { order: 3; }
  .portal-stage { order: 4; aspect-ratio: 1 / 0.92; margin: calc(4px * var(--u-space)) calc(-8px) 0; }
  .portal-action { order: 5; margin-top: 0; }
  .portal-title { max-width: 16ch; }
}
@media (max-width: 480px) {
  .portal-cta { width: 100%; justify-content: space-between; }
  .portal-lede { font-size: calc(16px * var(--u-type)); }
}

/* ── Copy in each look's hand ───────────────────────────────────────────────────────────── */
/* Swiss: two inks and the red; a hard rule, bold grotesk, square button */
html[data-direction^='swiss'] .portal-kicker::before { width: 32px; height: 4px; background: var(--color-swiss-red, var(--accent)); opacity: 1; }
html[data-direction^='swiss'] .portal-title { font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; }
html[data-direction^='swiss'] .portal-title-2 { color: var(--text); display: block; }
html[data-direction^='swiss'] .portal-cta { border-radius: 0; --cta-bg: var(--color-swiss-red, var(--accent)); --cta-fg: #fff; font-weight: 700; }
html[data-direction^='swiss'] .portal-stage { border-radius: 0; }
/* Ink: the second line set in italic, an underlined text link rather than a pill */
html[data-direction^='ink'] .portal-title-2,
html[data-direction^='stilllife'] .portal-title-2 { font-style: italic; }
html[data-direction^='ink'] .portal-cta {
  --cta-bg: transparent; --cta-fg: var(--text);
  padding-left: 0; padding-right: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1.5px solid currentColor;
}
/* Toybox: a chunky enamel pill with a hard offset shadow */
html[data-direction^='toybox'] .portal-cta {
  --cta-bg: var(--accent); --cta-fg: #fff;
  font-weight: 700; box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-theme='dark'][data-direction^='toybox'] .portal-cta { --cta-fg: #1a1210; }
html[data-direction^='toybox'] .portal-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000); }
html[data-direction^='toybox'] .portal-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); }
/* Paper: a hairline sheet, no fill */
html[data-direction^='paper'] .portal-cta {
  --cta-bg: transparent; --cta-fg: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); border-radius: 2px;
}
html[data-direction^='paper'] .portal-cta:hover { box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--text) 70%, transparent); }
/* Night looks: a star in the kicker, mono labels */
html[data-direction^='observatory'] .portal-kicker::before,
html[data-direction^='zenith'] .portal-kicker::before {
  width: 9px; height: 9px; opacity: 1; background: var(--portal-accent-text);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
html[data-direction^='observatory'] .portal-kicker { font-family: var(--font-mono); }
/* Ceramic looks: a soft glazed pill */
html[data-direction^='kiln'] .portal-cta,
html[data-direction^='clay'] .portal-cta {
  --cta-bg: color-mix(in srgb, var(--accent) 88%, var(--text)); --cta-fg: var(--bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--accent) 80%, #000);
}

/* ── The teleport veil ──────────────────────────────────────────────────────────────────── */
.portal-veil {
  position: fixed; inset: 0; z-index: 2147483000;
  overflow: hidden; contain: strict; pointer-events: auto; cursor: progress;
  --ms: var(--portal-ms, 1120ms);
  --ease-portal: cubic-bezier(0.7, 0, 0.25, 1);
}
.portal-veil > * { position: absolute; inset: 0; }
.portal-veil-sky {
  background:
    radial-gradient(60% 46% at 50% 66%, color-mix(in srgb, var(--portal-glow) 70%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--portal-zenith) 0%, var(--portal-mid) 46%, var(--portal-horizon) 74%, var(--portal-glow) 100%);
}
.portal-veil-stars { display: none; }
.portal-veil-ranges { width: 100%; height: 100%; transform: translateY(14%); }
.portal-veil-ranges .r3 { fill: var(--portal-r3); }
.portal-veil-ranges .r2 { fill: var(--portal-r2); }
.portal-veil-ranges .r1 { fill: var(--portal-r1); }
.portal-veil-bars { display: none; }
.portal-veil-mark {
  inset: auto 0 auto 0; top: 38%;
  text-align: center;
  font: italic 400 clamp(34px, 6vw, 84px)/1 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  letter-spacing: 0.01em;
  color: var(--portal-mark, var(--portal-paper));
  opacity: 0; transform: translateY(10px);
}
.portal-veil.is-on .portal-veil-mark { animation: portal-mark var(--ms) var(--ease-portal) forwards; }
.portal-veil.is-on .portal-veil-ranges { animation: portal-rise var(--ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes portal-mark { 0%, 52% { opacity: 0; transform: translateY(10px); } 88%, 100% { opacity: 1; transform: none; } }
@keyframes portal-rise { 0%, 25% { transform: translateY(14%); } 100% { transform: none; } }

/* iris (Two Forks, and the default): a round window onto TWLT's sky opens from the miniature */
.portal-veil[data-motion='iris'], .portal-veil[data-motion='stars'] { clip-path: circle(0 at var(--ox) var(--oy)); }
.portal-veil[data-motion='iris'].is-on, .portal-veil[data-motion='stars'].is-on { animation: portal-iris var(--ms) var(--ease-portal) forwards; }
@keyframes portal-iris {
  0% { clip-path: circle(0 at var(--ox) var(--oy)); }
  22% { clip-path: circle(7vmax at var(--ox) var(--oy)); }
  30% { clip-path: circle(6.4vmax at var(--ox) var(--oy)); }
  100% { clip-path: circle(150vmax at var(--ox) var(--oy)); }
}
/* stars: the night skins — the same window, onto a night full of stars */
.portal-veil[data-motion='stars'] .portal-veil-stars {
  display: block;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, var(--portal-paper) 99%, transparent),
    radial-gradient(1px 1px at 27% 34%, var(--portal-paper) 99%, transparent),
    radial-gradient(1.6px 1.6px at 41% 12%, var(--portal-paper) 99%, transparent),
    radial-gradient(1px 1px at 58% 27%, var(--portal-paper) 99%, transparent),
    radial-gradient(1.3px 1.3px at 71% 9%, var(--portal-paper) 99%, transparent),
    radial-gradient(1px 1px at 84% 31%, var(--portal-paper) 99%, transparent),
    radial-gradient(1.5px 1.5px at 92% 16%, var(--portal-paper) 99%, transparent),
    radial-gradient(1px 1px at 6% 42%, var(--portal-paper) 99%, transparent),
    radial-gradient(1px 1px at 35% 48%, var(--portal-paper) 99%, transparent),
    radial-gradient(1.2px 1.2px at 66% 44%, var(--portal-paper) 99%, transparent);
  background-size: 640px 420px;
  opacity: 0;
}
.portal-veil[data-motion='stars'].is-on .portal-veil-stars { animation: portal-twinkle var(--ms) linear forwards; }
@keyframes portal-twinkle { 0%, 20% { opacity: 0; } 60% { opacity: 0.9; } 75% { opacity: 0.55; } 100% { opacity: 1; } }

/* fold (Paper): a pale sheet folds down over the page from the top edge */
.portal-veil[data-motion='fold'] { perspective: 1800px; }
.portal-veil[data-motion='fold'] > .portal-veil-sky,
.portal-veil[data-motion='fold'] > .portal-veil-ranges { transform-origin: 50% 0; transform: rotateX(-96deg); backface-visibility: hidden; }
.portal-veil[data-motion='fold'].is-on > .portal-veil-sky,
.portal-veil[data-motion='fold'].is-on > .portal-veil-ranges { animation: portal-fold var(--ms) cubic-bezier(0.55, 0, 0.2, 1) forwards; }
.portal-veil[data-motion='fold']::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--portal-shadow) 35%, transparent), transparent 40%);
  opacity: 0;
}
.portal-veil[data-motion='fold'].is-on::after { animation: portal-crease var(--ms) linear forwards; }
@keyframes portal-fold { 0% { transform: rotateX(-96deg); } 72% { transform: rotateX(4deg); } 86% { transform: rotateX(-1.5deg); } 100% { transform: rotateX(0); } }
@keyframes portal-crease { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

/* bleed (Ink, Still Life): ink floods out of the drawing, then the paper clears through it */
.portal-veil[data-motion='bleed'] .portal-veil-sky { z-index: 1; background: var(--portal-paper); clip-path: circle(0 at var(--ox) var(--oy)); }
.portal-veil[data-motion='bleed'] .portal-veil-ranges { z-index: 2; clip-path: circle(0 at var(--ox) var(--oy)); }
.portal-veil[data-motion='bleed'] .portal-veil-ranges path { fill: none; stroke: var(--portal-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.portal-veil[data-motion='bleed'] .portal-veil-mark { z-index: 3; color: var(--portal-ink); }
.portal-veil-blot { display: none; }
.portal-veil[data-motion='bleed'] .portal-veil-blot { display: block; width: 100%; height: 100%; }
.portal-veil[data-motion='bleed'] .portal-veil-blot circle { fill: var(--portal-ink); r: 0; cx: var(--ox); cy: var(--oy); filter: url(#portal-ragged); }
.portal-veil[data-motion='bleed'].is-on .portal-veil-blot circle { animation: portal-blot var(--ms) cubic-bezier(0.6, 0, 0.7, 0.9) forwards; }
.portal-veil[data-motion='bleed'].is-on .portal-veil-sky,
.portal-veil[data-motion='bleed'].is-on .portal-veil-ranges { animation: portal-clear var(--ms) cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes portal-blot { 0% { r: 0; } 50% { r: 130vmax; } 100% { r: 130vmax; } }
@keyframes portal-clear { 0%, 36% { clip-path: circle(0 at var(--ox) var(--oy)); } 100% { clip-path: circle(150vmax at var(--ox) var(--oy)); } }

/* wipe (Swiss): hard bars, left to right — ink, red, paper — and the name set big */
.portal-veil[data-motion='wipe'] .portal-veil-sky,
.portal-veil[data-motion='wipe'] .portal-veil-ranges { display: none; }
.portal-veil[data-motion='wipe'] .portal-veil-bars { display: block; }
.portal-veil-bars i { position: absolute; inset: 0; transform: translateX(-101%); }
.portal-veil-bars i:nth-child(1) { background: var(--portal-ink); }
.portal-veil-bars i:nth-child(2) { background: var(--portal-spot); }
.portal-veil-bars i:nth-child(3) { background: var(--portal-paper); }
.portal-veil[data-motion='wipe'].is-on .portal-veil-bars i { animation: portal-bar calc(var(--ms) * 0.5) cubic-bezier(0.75, 0, 0.2, 1) forwards; }
.portal-veil[data-motion='wipe'].is-on .portal-veil-bars i:nth-child(2) { animation-delay: calc(var(--ms) * 0.14); }
.portal-veil[data-motion='wipe'].is-on .portal-veil-bars i:nth-child(3) { animation-delay: calc(var(--ms) * 0.28); }
@keyframes portal-bar { to { transform: none; } }
.portal-veil[data-motion='wipe'] .portal-veil-mark {
  z-index: 2; top: auto; bottom: 10%; text-align: left; padding: 0 6vw;
  font: 700 clamp(48px, 10vw, 168px)/0.9 var(--font-display, 'Inter Tight', sans-serif); font-style: normal; letter-spacing: -0.045em;
  color: var(--portal-ink);
}
.portal-veil[data-motion='wipe'] .portal-veil-mark span { display: block; }
.portal-veil[data-motion='wipe'] .portal-veil-mark span:last-child { color: var(--portal-spot); }

/* pop (Toybox): an enamel disc bounces out of the toy, then the sky pours through it */
.portal-veil[data-motion='pop'] { background: transparent; }
.portal-veil[data-motion='pop'] .portal-veil-blot { display: block; width: 100%; height: 100%; }
.portal-veil[data-motion='pop'] .portal-veil-blot circle { fill: var(--portal-spot); r: 0; cx: var(--ox); cy: var(--oy); filter: none; }
.portal-veil[data-motion='pop'].is-on .portal-veil-blot circle { animation: portal-pop var(--ms) linear forwards; }
.portal-veil[data-motion='pop'] .portal-veil-sky,
.portal-veil[data-motion='pop'] .portal-veil-ranges { clip-path: circle(0 at var(--ox) var(--oy)); }
.portal-veil[data-motion='pop'].is-on .portal-veil-sky,
.portal-veil[data-motion='pop'].is-on .portal-veil-ranges { animation: portal-pop-sky var(--ms) cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes portal-pop {
  0% { r: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.5); }
  30% { r: 22vmax; animation-timing-function: ease-in-out; }
  42% { r: 18vmax; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  100% { r: 160vmax; }
}
@keyframes portal-pop-sky { 0%, 34% { clip-path: circle(0 at var(--ox) var(--oy)); } 100% { clip-path: circle(150vmax at var(--ox) var(--oy)); } }

/* glaze (Kiln, Clay): the sky runs down the page like glaze, drips leading */
.portal-veil[data-motion='glaze'] > .portal-veil-sky,
.portal-veil[data-motion='glaze'] > .portal-veil-ranges { clip-path: polygon(0 0, 100% 0, 100% -4%, 88% -2%, 80% -6%, 68% -3%, 57% -8%, 45% -2%, 33% -5%, 22% -1%, 12% -7%, 0 -3%); }
.portal-veil[data-motion='glaze'].is-on > .portal-veil-sky,
.portal-veil[data-motion='glaze'].is-on > .portal-veil-ranges { animation: portal-glaze var(--ms) cubic-bezier(0.55, 0, 0.35, 1) forwards; }
@keyframes portal-glaze {
  0% { clip-path: polygon(0 0, 100% 0, 100% -4%, 88% -2%, 80% -6%, 68% -3%, 57% -8%, 45% -2%, 33% -5%, 22% -1%, 12% -7%, 0 -3%); }
  55% { clip-path: polygon(0 0, 100% 0, 100% 52%, 88% 61%, 80% 47%, 68% 58%, 57% 70%, 45% 50%, 33% 63%, 22% 49%, 12% 66%, 0 54%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 112%, 88% 118%, 80% 110%, 68% 116%, 57% 124%, 45% 111%, 33% 119%, 22% 110%, 12% 121%, 0 113%); }
}

/* fade (reduced motion): a plain crossfade to the sky */
.portal-veil[data-motion='fade'] { opacity: 0; transition: opacity var(--ms) linear; }
/* base.css zeroes every transition under reduced motion with a layered !important, and a layered
   !important beats any unlayered one — so this exception lives in the same layer, like the site's
   own scene-canvas crossfade. A plain opacity fade has no movement; it keeps its duration. */
@layer engine { @media (prefers-reduced-motion: reduce) { .portal-veil[data-motion='fade'] { transition-duration: 320ms !important; } } }
.portal-veil[data-motion='fade'].is-on { opacity: 1; }
.portal-veil[data-motion='fade'] .portal-veil-ranges { transform: none; }
.portal-veil[data-motion='fade'].is-on .portal-veil-ranges,
.portal-veil[data-motion='fade'].is-on .portal-veil-mark { animation: none; }
.portal-veil[data-motion='fade'] .portal-veil-mark { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .portal-canvas { transform: none; transition: opacity 300ms linear; }
  .portal-cta, .portal-cta .portal-arrow { transition: none; }
}