/* Shared brand tokens — keep in sync with the app palette in
   app/src/main/java/com/example/artdisplay/ui/theme/Color.kt */
:root {
  --stage: #000;
  --espresso-950: #120D09;
  --ivory: #F3EAE0;
  --ivory-dim: #C9BAA9;
  --ivory-faint: #8F8172;
  --brass: #C89B5F;
  --brass-bright: #E4C48E;
  --brass-deep: #8A6A3C;
  --plaque-bg: rgba(248, 243, 233, .95);
  --plaque-text: #241B12;
  --plaque-style: #6E5D47;
  /* Motion tokens — mirror MotionTokens in ui/theme/Motion.kt */
  --dur-quick: 180ms;
  --dur-standard: 280ms;
  --dur-gentle: 450ms;
  --dur-gallery: 1200ms;
  --ease-gallery: cubic-bezier(.33, 0, .15, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
}

/* Reduced motion: collapse every transition to a short opacity-only fade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 120ms;
    --dur-standard: 150ms;
    --dur-gentle: 200ms;
    --dur-gallery: 250ms;
  }
  #plaque { transform: none; }
  #plaque.visible { transform: none; }
}

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--stage); }
.idle-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% 18%, rgba(200, 155, 95, .20), transparent 42%),
    linear-gradient(160deg, #14100B 0%, #241A11 55%, #171310 100%);
  opacity: 1;
  transition: opacity var(--dur-gentle) var(--ease-standard);
}
.idle-screen.hidden {
  opacity: 0;
  pointer-events: none;
}
/* The Drawn Frame: brass hairline draws itself, then the wordmark rises in. */
.idle-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.idle-outline {
  width: min(46vw, 880px);
  height: auto;
  overflow: visible;
}
.idle-outline rect {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: idle-drawframe 2.6s cubic-bezier(.6, 0, .3, 1) forwards;
}
@keyframes idle-drawframe {
  to { stroke-dashoffset: 0; }
}
.idle-inner {
  position: absolute;
  text-align: center;
  opacity: 0;
  animation: idle-rise var(--dur-gallery) var(--ease-gallery) 2.1s forwards;
}
@keyframes idle-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.idle-inner h1 {
  margin: 0;
  font: 500 clamp(48px, 7vw, 108px)/1.05 Fraunces, Georgia, serif;
  letter-spacing: .04em;
}
.idle-sub {
  margin: 1.1em 0 0;
  color: var(--brass-bright);
  font: 500 clamp(12px, 1.2vw, 19px)/1.2 Inter, Arial, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.idle-dots span {
  animation: idle-dotpulse 1.6s infinite;
}
.idle-dots span:nth-child(2) { animation-delay: .25s; }
.idle-dots span:nth-child(3) { animation-delay: .5s; }
@keyframes idle-dotpulse {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}
.idle-credit {
  position: absolute;
  right: 2.6%;
  bottom: 3.6%;
  color: var(--ivory-faint);
  font: 400 clamp(11px, 1.05vw, 17px)/1.2 Inter, Arial, sans-serif;
  letter-spacing: .08em;
}
.idle-credit b {
  color: var(--brass);
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .idle-outline rect { animation-duration: .25s; }
  .idle-inner { animation-delay: .25s; animation-duration: .25s; }
  .idle-dots span { animation: none; }
}
#gallery { position: fixed; inset: 0; display: none; background: #000; transition: opacity .45s ease; }
#frame {
  --frame-y: 0vh;
  --frame-x: 0vw;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  background: var(--stage);
}
/* Gallery picture light: a barely-there brass wash falling on the canvas
   from above. Pre-composed gradient, opacity only — cheap on Chromecast. */
#frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(228, 196, 142, .07), transparent 68%);
}
/* Two stacked art layers crossfade between artworks: the incoming layer
   gets .active and fades up over the gallery duration. */
.art-layer {
  position: absolute;
  left: var(--frame-x);
  right: var(--frame-x);
  top: var(--frame-y);
  bottom: var(--frame-y);
  display: block;
  width: calc(100% - var(--frame-x) - var(--frame-x));
  height: calc(100% - var(--frame-y) - var(--frame-y));
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-gallery) var(--ease-gallery);
}
.art-layer.active {
  opacity: 1;
}
#gallery.fit-cover .art-layer {
  object-fit: cover;
}
#frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-gentle) var(--ease-standard);
}
#frame-overlay.loaded {
  opacity: 1;
}
#video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#video { display: none; }
/* These inset values must stay in sync with frameInsetFraction() in the
   Android app (app/src/main/java/com/example/artdisplay/MainActivity.kt). */
#frame.frame-none { --frame-y: 0vh; --frame-x: 0vw; }
#frame.frame-classic_wood {
  --frame-y: 7.5vh;
  --frame-x: 7.5vw;
}
#frame.frame-ornate_gold {
  --frame-y: 9.5vh;
  --frame-x: 9.5vw;
}
#frame.frame-modern_black {
  --frame-y: 6.8vh;
  --frame-x: 6.8vw;
}
#frame.frame-minimal_white {
  --frame-y: 5.5vh;
  --frame-x: 5.5vw;
}
#plaque {
  position: absolute;
  z-index: 3;
  right: calc(var(--frame-x) + 3%);
  bottom: calc(var(--frame-y) + 3%);
  /* Museum-label proportions: wide and short (~1/3 width x ~1/5 height) so
     the text breathes without covering the artwork. */
  width: min(34vw, 660px);
  max-height: 20vh;
  overflow: hidden;
  padding: 12px 20px;
  box-sizing: border-box;
  color: var(--plaque-text);
  background: var(--plaque-bg);
  border-left: 2px solid var(--brass-deep);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-gentle) var(--ease-gallery), transform var(--dur-gentle) var(--ease-gallery);
}
#plaque.visible { opacity: 1; transform: translateY(0); }
#plaque-title { font: 600 19px Fraunces, Georgia, serif; margin-bottom: 2px; }
#plaque-style { font: italic 500 13px Fraunces, Georgia, serif; color: var(--plaque-style); margin-bottom: 6px; }
#plaque-story {
  font: 14px/1.4 Inter, Arial, sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
#credit { position: fixed; right: 20px; bottom: 14px; color: var(--ivory-faint); font: 18px Inter, sans-serif; opacity: .8; }