/*
 * Ryan Yang — shared experience system
 * The living index remains the art direction. This layer carries its motion,
 * focus, touch, and route-continuity rules into photography, support, and Lab.
 */
:root {
  --motion-instant: 120ms;
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-slow: 560ms;
  --motion-scene: 860ms;
  --motion-stagger: 42ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --state-hover: .08;
  --state-press: .13;
  --focus-ring: #e9b45c;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: route-out var(--motion-fast) var(--ease-exit) both;
}

::view-transition-new(root) {
  animation: route-in var(--motion-medium) var(--ease-emphasized) both;
}

@keyframes route-out {
  to { opacity: 0; transform: translateY(-5px); filter: blur(2px); }
}

@keyframes route-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
}

html {
  scroll-padding-top: 96px;
}

body {
  -webkit-tap-highlight-color: rgba(233, 180, 92, .18);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(a, button, input, select, textarea, summary) {
  touch-action: manipulation;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

:where(section, footer, [id]) {
  scroll-margin-top: 104px;
}

.skip-link {
  position: fixed;
  /* One step above the site loader (100000), the current top of the stack. */
  z-index: 100001;
  inset: max(12px, env(safe-area-inset-top)) auto auto 14px;
  padding: 12px 16px;
  border: 1px solid currentColor;
  background: #f6ecdc;
  color: #211a14;
  font: 650 12px/1 "Instrument Sans", "Geist", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--motion-fast) var(--ease-emphasized);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-link:focus {
  transform: translateY(0);
}

.experience-progress {
  position: fixed;
  z-index: 10000;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--experience-progress, 0));
  transform-origin: 0 50%;
  background: #c46a2b;
  will-change: transform;
}

/* Registration cursor: an exact amber point with two small, lagging calibration
 * marks. Context appears beside the pointer instead of replacing it with a
 * floating button, keeping the artwork and native pointing relationship clear. */
.award-cursor {
  --cursor-trail-x: 0px;
  --cursor-trail-y: 0px;
  --cursor-echo-x: 0px;
  --cursor-echo-y: 0px;
  --cursor-angle: 0deg;
  --cursor-tension: 0;
  --cursor-stretch: 1;
  position: fixed;
  z-index: 12000;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  isolation: isolate;
  will-change: transform;
  transition: opacity 110ms ease, visibility 0s linear 110ms;
}

.award-cursor.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.award-cursor-trail,
.award-cursor-echo,
.award-cursor-shape,
.award-cursor-label {
  position: absolute;
  left: 0;
  top: 0;
}

/* A print-registration ring carries direction without becoming a halo. */
.award-cursor-trail {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(43, 31, 20, .46);
  border-right-color: rgba(196, 106, 43, .92);
  border-bottom-color: transparent;
  box-shadow: 0 0 0 1px rgba(250, 244, 232, .5);
  opacity: .72;
  transform:
    translate(calc(-50% + var(--cursor-trail-x)), calc(-50% + var(--cursor-trail-y)))
    rotate(var(--cursor-angle))
    scaleX(var(--cursor-stretch));
  transform-origin: 50% 50%;
  will-change: transform;
}

.award-cursor-echo {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #247b76;
  box-shadow: 0 0 0 1px rgba(250, 244, 232, .78);
  opacity: .78;
  transform: translate(
    calc(-50% + var(--cursor-echo-x)),
    calc(-50% + var(--cursor-echo-y))
  );
  will-change: transform;
}

html[data-cursor-mode="interactive"] .award-cursor-trail {
  opacity: .34;
}

.award-cursor-shape {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(250, 244, 232, .92);
  background: #c46a2b;
  box-shadow: 0 1px 5px rgba(43, 31, 20, .3);
  transform: translate(-50%, -50%);
  transition:
    width 180ms var(--ease-emphasized),
    height 180ms var(--ease-emphasized),
    border-color 140ms ease,
    background-color 140ms ease;
}

.award-cursor-label {
  left: 18px;
  top: 18px;
  min-width: 0;
  padding: 7px 9px 6px;
  border: 1px solid rgba(250, 244, 232, .28);
  border-radius: 2px;
  background: #2b1f14;
  color: #faf4e8;
  font: 700 9px/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .14em;
  text-indent: .14em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-4px, -4px) scale(.92);
  transform-origin: 0 0;
  box-shadow: 3px 4px 0 rgba(196, 106, 43, .18);
  transition: opacity 120ms ease, transform 180ms var(--ease-emphasized);
}

.award-cursor.has-label .award-cursor-shape {
  width: 26px;
  height: 26px;
  border-color: rgba(250, 244, 232, .86);
  background: rgba(196, 106, 43, .16);
  box-shadow:
    inset 0 0 0 1px rgba(43, 31, 20, .46),
    0 2px 8px rgba(43, 31, 20, .18);
}

.award-cursor.has-label .award-cursor-label {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.award-cursor.is-pressed .award-cursor-shape {
  width: 18px;
  height: 18px;
  background: #247b76;
}

.award-cursor.is-pressed .award-cursor-trail {
  opacity: .18;
}

.award-cursor-media {
  position: absolute;
  left: 18px;
  top: 48px;
  width: 156px;
  height: 100px;
  border: 3px solid #faf4e8;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(5px) scale(.96);
  transform-origin: 0 0;
  pointer-events: none;
  box-shadow: 4px 5px 0 rgba(43, 31, 20, .3);
  transition: opacity 140ms ease, transform 200ms var(--ease-emphasized);
}

.award-cursor-media img,
.award-cursor-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.award-cursor.has-media .award-cursor-media {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.award-cursor.has-media .award-cursor-shape {
  width: 26px;
  height: 26px;
}

.award-cursor[data-state="inverse"] {
  mix-blend-mode: exclusion;
}

.award-magnetic-active {
  translate: var(--magnetic-x, 0) var(--magnetic-y, 0);
  transition: translate 180ms var(--ease-emphasized);
  will-change: translate;
}

html[data-award-cursor="ready"] body[data-experience="index"],
html[data-award-cursor="ready"] body[data-experience="index"] :where(a, button, summary, canvas, [data-cursor-text]) {
  cursor: none !important;
}

html[data-award-cursor="ready"] body[data-experience="index"] :where(input, textarea, select, iframe, [contenteditable="true"]) {
  cursor: auto !important;
}

.tipin-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 1px;
  transform-origin: center;
  will-change: transform;
}

.tipin-media > img {
  height: 110%;
  aspect-ratio: auto;
  transform-origin: center;
  will-change: transform;
}

/* Motion-in-view starts only after JS has installed the observer. */
[data-experience-ready="true"] .experience-reveal {
  opacity: 0;
  transform: translateY(22px);
}

[data-experience-ready="true"] .experience-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.experience-spotlight {
  position: relative;
  isolation: isolate;
}

.experience-spotlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--spotlight-opacity, 0);
  background: radial-gradient(
    320px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    color-mix(in srgb, var(--color-accent, #e9b45c) 12%, transparent),
    transparent 68%
  );
  transition: opacity var(--motion-fast) var(--ease-standard);
}

/* The primary archive keeps its authored geometry while meeting a consistent
 * physical target size on touch screens and compact laptop layouts. */
body[data-experience="index"] :where(
  .brand,
  .hx-trigger,
  .hx-panel a,
  .hd-contact,
  .identity-cta,
  .dossier-toggle,
  .dg-all,
  .contact-links a,
  .foot-row a
) {
  min-height: 46px;
}

body[data-experience="index"] .brand {
  min-width: 44px;
}

body[data-experience="index"] :where(.assistant-close, .assistant-send) {
  min-width: 46px;
  min-height: 46px;
}

body[data-experience="index"] :where(.assistant-chip, .assistant-input) {
  min-height: 46px;
}

body[data-experience="index"] :where(.contact-links a, .foot-row a) {
  display: inline-flex;
  align-items: center;
}

body[data-experience="index"] footer a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

body[data-experience="index"] #about dd a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
}

body[data-experience="photography"] :where(.brand, .subnav a, .lb-close, .lb-btn) {
  min-width: 44px;
  min-height: 44px;
}

body[data-experience="photography"] .subnav a {
  display: inline-flex;
  align-items: center;
}

/* Support records: one shared archive grammar, with each app retaining its accent. */
body.support-page {
  overflow-x: clip;
  cursor: auto;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.support-page .hero {
  overflow: clip;
  min-height: min(720px, 78svh);
  display: grid;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.support-page .hero .container {
  position: relative;
  z-index: 1;
}

.support-page .hero-title {
  text-wrap: balance;
  letter-spacing: -.04em;
}

.support-page .hero > .container::before {
  content: "PRODUCT RECORD / SUPPORT";
  display: block;
  margin-bottom: 18px;
  color: color-mix(in srgb, var(--color-accent) 76%, white);
  font: 650 10px/1.2 "Geist", "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .2em;
}

.support-page .nav-wrapper {
  padding-inline: max(12px, env(safe-area-inset-left));
}

.support-page .nav-dock {
  max-width: calc(100vw - 24px);
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.support-page .nav-dock::-webkit-scrollbar {
  display: none;
}

.support-page :where(.nav-link, .nav-logo, .toc-item a, .style-swatch, summary, button) {
  min-height: 44px;
}

.support-page .nav-logo {
  min-width: 44px;
  justify-content: center;
}

.support-page :where(.nav-link, .nav-logo, .toc-item a, .style-swatch) {
  display: inline-flex;
  align-items: center;
}

.support-page .search-box {
  max-width: 760px;
}

.support-page .search-input {
  min-height: 56px;
  outline: 0;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.support-page .search-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.support-page .grid-layout {
  align-items: start;
}

.support-page .sidebar {
  top: 104px;
}

.support-page .content-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

.support-page .section-header {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  padding-bottom: 16px;
}

.support-page .section-header h2 {
  text-wrap: balance;
}

.support-page #privacy-policy h3 {
  font-size: 1rem;
  line-height: 1.35;
}

.support-page .card,
.support-page details {
  border-color: color-mix(in srgb, var(--color-accent) 16%, rgba(255,255,255,.08));
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-emphasized);
}

@media (hover: hover) and (pointer: fine) {
  .support-page .card:hover,
  .support-page details:hover {
    border-color: color-mix(in srgb, var(--color-accent) 36%, rgba(255,255,255,.14));
  }
}

.support-page details[open] {
  background: color-mix(in srgb, var(--color-accent) 5%, rgba(255,255,255,.025));
}

.support-page summary {
  cursor: pointer;
  user-select: none;
}

.support-page :where(input, select, textarea) {
  font-size: max(16px, 1rem);
}

.support-page :where(input, select, textarea):focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.support-page .submit-btn {
  min-height: 48px;
  transition:
    transform var(--motion-fast) var(--ease-emphasized),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.support-page .submit-btn:active {
  transform: translateY(1px) scale(.985);
}

.support-page .content-section a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.support-page :where(.assistant-close, .assistant-send) {
  min-width: 44px;
}

.support-page .assistant-chip {
  min-height: 44px;
}

/* The assistant remains reachable without obscuring the mobile navigation dock. */
.support-page .project-assistant-toggle {
  bottom: calc(var(--safe-bottom) + 72px);
}

/* 2048 is filed as a lab specimen instead of a separate neon microsite. */
body.lab-page {
  overflow-x: clip;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background:
    radial-gradient(circle at 50% 28%, rgba(196,106,43,.11), transparent 34%),
    #0d0d0f;
}

.lab-page .mesh-bg {
  opacity: .58;
}

.lab-page .nav-wrapper {
  padding-inline: max(12px, env(safe-area-inset-left));
}

.lab-page .nav-dock {
  max-width: calc(100vw - 24px);
}

.lab-page .game-wrapper {
  position: relative;
  isolation: isolate;
}

.lab-page .game-wrapper::before {
  content: "LAB RECORD 01 / INTERACTIVE SYSTEM";
  display: block;
  margin: 0 auto 18px;
  color: #c99462;
  font: 650 10px/1.2 "Geist", system-ui, sans-serif;
  letter-spacing: .19em;
  text-align: center;
}

.lab-page :where(.btn, .nav-link, .nav-logo) {
  min-height: 44px;
}

.lab-page .stat-card,
.lab-page .game-board {
  border-color: rgba(233, 180, 92, .14);
}

.lab-page .btn {
  transition:
    transform var(--motion-fast) var(--ease-emphasized),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.lab-page .btn:active {
  transform: scale(.97);
}

.lab-page #game-over-overlay > div {
  max-width: min(430px, calc(100vw - 32px));
}

/* Experimental DOM-to-canvas paper lift. The authoritative letter stays real
 * HTML unless a successful canvas paint explicitly enables this state. */
.html-canvas-letter {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.html-canvas-letter-source {
  position: absolute;
  left: 7%;
  top: 7%;
  width: 86%;
  height: 78%;
  box-sizing: border-box;
  display: grid;
  padding: 8% 9%;
  border: 1px solid rgba(43,31,20,.17);
  background:
    linear-gradient(101deg, transparent 47%, rgba(43,31,20,.055) 49%, transparent 52%),
    #f7ecdc;
  color: #2b1f14;
  text-align: left;
  box-shadow: inset 0 0 48px rgba(118,79,44,.08);
}

.html-canvas-letter-source small {
  font: 600 9px/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.html-canvas-letter-source b {
  margin-top: auto;
  font: 600 clamp(1.7rem,3.7vw,3.5rem)/1 "Fraunces", Georgia, serif;
}

.html-canvas-letter-source span {
  font: 500 10px/1.4 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-envelope.has-html-canvas.is-open .html-canvas-letter {
  opacity: 1;
}

.contact-envelope.has-html-canvas.is-open .envelope-letter {
  opacity: 0;
}

@media (max-width: 760px) {
  body.support-page {
    padding-bottom: calc(var(--safe-bottom) + 76px);
  }

  .support-page .hero {
    min-height: auto;
    padding-top: 132px;
  }

  .support-page .hero::before,
  .support-page .hero::after {
    max-width: 100%;
  }

  .support-page .grid-layout,
  .support-page main,
  .support-page .content-section,
  .support-page .card,
  .support-page details {
    min-width: 0;
    max-width: 100%;
  }

  .support-page .nav-wrapper {
    bottom: var(--safe-bottom);
    max-width: 100vw;
    overflow: hidden;
  }

  .support-page .nav-dock {
    width: auto;
    gap: 2px;
    justify-content: center;
    padding: 6px 8px;
  }

  .support-page .nav-dock .nav-link[href="/"],
  .support-page .nav-dock .nav-link[href="/#about"],
  .support-page .nav-dock .nav-link[href="/#contact"] {
    display: none;
  }

  .support-page .toc-item a.active {
    color: #101012;
    font-weight: 750;
  }

  .support-page .project-assistant-toggle {
    bottom: calc(var(--safe-bottom) + 62px);
    right: max(12px, env(safe-area-inset-right));
  }

  .lab-page .game-wrapper {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .experience-progress,
  .html-canvas-letter {
    display: none;
  }

  .award-cursor {
    display: none !important;
  }

  .award-magnetic-active {
    translate: none !important;
    transition: none !important;
  }

  .tipin-media,
  .tipin-media > img {
    transform: none !important;
  }

  .tipin-media > img {
    height: 100%;
  }

  [data-experience-ready="true"] .experience-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .experience-progress {
    background: CanvasText;
  }

  .experience-spotlight::after {
    display: none;
  }
}