/* Shared scene-composition styles: editor canvas, v2 player, readers.
   Tokens mirror feedee-story.css (--fsp-*) with scene-scoped fallbacks. */

.feedee-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}

.feedee-scene__layer {
  will-change: transform, opacity;
}

.feedee-scene__layer--asset picture,
.feedee-scene__asset {
  display: block;
  width: 100%;
  height: 100%;
}

.feedee-scene__asset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- Bubbles ---------------------------------------------------------- */

.feedee-scene__bubble {
  position: relative;
  display: inline-block;
  padding: clamp(0.5rem, 1.6vw, 0.95rem) clamp(0.8rem, 2.2vw, 1.35rem);
  min-width: 3.5rem;
  text-align: center;
}

.feedee-scene__bubble-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.feedee-scene__bubble-shell path,
.feedee-scene__bubble-shell circle {
  fill: #ffffff;
  stroke: #101014;
  stroke-width: 1.6px;
  stroke-linejoin: round;
}

.feedee-scene__bubble-text {
  position: relative;
  z-index: 1;
  display: block;
  color: #14121a;
  font-family: var(--fsp-comic-font, "Satoshi", "Segoe UI", sans-serif);
  font-size: clamp(0.72rem, 1.7vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.feedee-scene__bubble--thought .feedee-scene__bubble-text {
  font-style: italic;
  font-weight: 600;
}

.feedee-scene__bubble--shout .feedee-scene__bubble-text {
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.feedee-scene__bubble--crowd-dark .feedee-scene__bubble-shell path {
  fill: #191627;
  stroke: rgba(255, 255, 255, 0.55);
}

.feedee-scene__bubble--crowd-dark .feedee-scene__bubble-text {
  color: #f2ecf7;
  font-weight: 600;
}

.feedee-scene__bubble--narration-box .feedee-scene__bubble-shell path {
  fill: #f7ecd8;
  stroke: #2a2118;
}

.feedee-scene__bubble--narration-box .feedee-scene__bubble-text {
  color: #241c12;
  font-weight: 600;
  text-align: start;
}

.feedee-scene__bubble--sfx-text {
  padding: 0;
}

.feedee-scene__bubble--sfx-text .feedee-scene__bubble-text {
  color: var(--fsp-pink, #ff1a75);
  font-family: var(--fsp-display-font, "Bona Nova", serif);
  font-size: clamp(1.1rem, 3.4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px #14121a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* ---- Text blocks ------------------------------------------------------ */

.feedee-scene__textblock {
  padding: clamp(0.6rem, 1.8vw, 1rem) clamp(0.85rem, 2.4vw, 1.4rem);
  border-radius: 0.5rem;
  font-size: clamp(0.74rem, 1.8vw, 1.02rem);
  line-height: 1.5;
}

.feedee-scene__textblock--narration {
  background: rgba(9, 8, 10, 0.82);
  border: 1px solid var(--fsp-line, rgba(255, 255, 255, 0.13));
  color: var(--fsp-ink, #f4f0ea);
}

.feedee-scene__textblock--body-description {
  background: rgba(25, 12, 20, 0.85);
  border-inline-start: 3px solid var(--fsp-pink, #ff1a75);
  color: var(--fsp-ink, #f4f0ea);
  font-style: italic;
}

.feedee-scene__textblock--feeling {
  background: rgba(20, 14, 26, 0.85);
  border: 1px dashed var(--fsp-pink-soft, #ff8eb9);
  color: var(--fsp-pink-soft, #ff8eb9);
  font-style: italic;
}

.feedee-scene__textblock--time-card {
  background: #0c0b10;
  border: 1px solid var(--fsp-warm, #e6a56a);
  color: var(--fsp-warm, #e6a56a);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Effects ---------------------------------------------------------- */

.feedee-scene__effect--vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 52%,
    rgba(0, 0, 0, calc(0.75 * var(--fsc-effect-strength, 0.5))) 100%
  );
}

.feedee-scene__effect--tint {
  background: var(--fsc-tint-color, #ff1a75);
  opacity: calc(0.28 * var(--fsc-effect-strength, 0.5));
  mix-blend-mode: soft-light;
}

.feedee-scene__effect--grain {
  opacity: calc(0.4 * var(--fsc-effect-strength, 0.5));
  background-image: repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0% 0.5%, transparent 0.5% 1%);
  background-size: 7px 7px;
  mix-blend-mode: overlay;
}

.feedee-scene__effect--blur-backdrop {
  backdrop-filter: blur(var(--fsc-effect-blur, 6px));
}

/* ---- Reveal animations ------------------------------------------------ */

.feedee-scene__reveal {
  animation-delay: var(--fsc-reveal-delay, 0ms);
  animation-duration: var(--fsc-reveal-duration, 420ms);
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

.feedee-scene__reveal--fade {
  animation-name: fsc-reveal-fade;
}

.feedee-scene__reveal--rise {
  animation-name: fsc-reveal-rise;
}

.feedee-scene__reveal--pop {
  animation-name: fsc-reveal-pop;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fsc-reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fsc-reveal-rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fsc-reveal-pop {
  from { opacity: 0; scale: 0.86; }
  to { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .feedee-scene__reveal {
    animation: none !important;
  }
}

/* ---- Container-relative typography ------------------------------------ */
/* Text sizes scale with the STAGE (the nearest inline-size container: the
   player host, the editor canvas world, a future comic panel), not the
   viewport — the vw rules above are only the fallback for browsers without
   container queries. Factors are tuned so an ~800px stage sits at the caps
   (matching the pre-container desktop look) and phones keep the readable rem
   floors; between the two, text tracks the stage proportionally. The floors
   deliberately trade pixel-perfect proportionality for legibility at small
   stage widths — both the editor and every reader apply them identically, so
   WYSIWYG parity holds at any equal stage width. */

@supports (width: 1cqi) {
  .feedee-scene__bubble {
    padding: clamp(0.5rem, 1.85cqi, 0.95rem) clamp(0.8rem, 2.55cqi, 1.35rem);
  }

  .feedee-scene__bubble-text {
    font-size: clamp(0.72rem, 2cqi, 1rem);
  }

  .feedee-scene__bubble--sfx-text .feedee-scene__bubble-text {
    font-size: clamp(1.1rem, 3.9cqi, 2.2rem);
  }

  .feedee-scene__textblock {
    padding: clamp(0.6rem, 2.1cqi, 1rem) clamp(0.85rem, 2.75cqi, 1.4rem);
    font-size: clamp(0.74rem, 2.1cqi, 1.02rem);
  }
}