/* ============================================================================
   DTR TRANSFORMATION STUDIO — component CSS
   Premium dark + gold theme matching the DTR brand.
   Self-contained — no dependency on the rest of the site's stylesheet, so
   the component renders identically on the home hero AND on the standalone
   admin page.
   ============================================================================ */

/* host container — applied via JS when the studio mounts.
   IMPORTANT: do NOT set `position: relative` here — the host element on
   pages like the home hero is already `position: absolute; inset: 0 0 0 36%`
   (`.hv-imgwrap`), and overriding that to `relative` collapses the host to
   zero height. We only force a positioning *context* via `isolation: isolate`
   (creates a new stacking context without changing layout). On pages that
   embed the studio in a regular flow div, the existing position default
   (static) is fine because the canvas + UI are absolutely positioned to
   100% of the host's content box. */
.dtrs-host {
  overflow: hidden;
  isolation: isolate;
  background: #0a0f14;
}
/* On admin/standalone pages where the host is a plain <div>, give it
   intrinsic positioning so the absolute children resolve correctly. The
   home hero's `.hv-imgwrap` already provides this so this rule is a no-op
   there — `position: absolute` wins over `position: relative` because the
   imgwrap rule has equal specificity but appears later in the cascade…
   defensively, though, only apply if no specific position is set. We use a
   guard: any element with the embed class but NOT `.hv-imgwrap`. */
.dtrs-host:not(.hv-imgwrap) { position: relative; }
/* When the studio mounts (.dtrs-host added), hide the static fallback <img>
   that pages may include for graceful degradation when JS/Three.js fails.
   EXCEPTION: if the studio errored (WebGL/texture unavailable, or a file://
   crossOrigin block during local preview), keep the static photo visible. */
.dtrs-host:not(.dtrs-error) .dtr-studio-fallback { display: none !important; }
.dtrs-host * {
  box-sizing: border-box;
}

/* the WebGL canvas fills the host */
.dtrs-canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* fade-in once both textures are loaded */
.dtrs-host:not(.dtrs-ready) .dtrs-canvas { opacity: 0; }
.dtrs-host .dtrs-canvas {
  opacity: 1;
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1) .15s;
}
/* Graceful degradation on studio error: show the static photo, hide the dead
   WebGL canvas, and suppress the raw error text. The .hv-img-fade / .hv-img-glow
   overlays remain on top via DOM order, preserving the hero's framed look. */
.dtrs-host.dtrs-error .dtr-studio-fallback { display: block !important; }
.dtrs-host.dtrs-error .dtrs-canvas { display: none !important; }
.dtrs-host.dtrs-error::after { content: none !important; }

/* control overlay sits on top of canvas */
.dtrs-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: grid;
  grid-template-areas:
    "headline headline headline"
    ".         .         .       "
    "replay   slider     cta     ";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: clamp(14px, 2vw, 22px);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.dtrs-ui > * { pointer-events: auto; }

/* headline overlay, fades in once playing */
.dtrs-headline {
  grid-area: headline;
  align-self: start;
  justify-self: center;
  margin-top: clamp(20px, 6vw, 50px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 300;
  letter-spacing: -.01em;
  color: #f8f9fa;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(8px);
  animation: dtrs-headline-in .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
  text-align: center;
  max-width: 80%;
  pointer-events: none;
}
@keyframes dtrs-headline-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* replay button — small gold-outlined circle */
.dtrs-btn {
  grid-area: replay;
  align-self: end;
  justify-self: start;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(10,15,20,.55);
  border: 1px solid rgba(184,135,35,.55);
  color: #e0b862;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s, color .18s, transform .14s;
}
.dtrs-btn:hover {
  background: rgba(10,15,20,.78);
  border-color: #e0b862;
  color: #fff3b0;
  transform: translateY(-1px);
}
.dtrs-btn:active { transform: translateY(0); }

/* manual scrub slider, gold-track */
.dtrs-slider {
  grid-area: slider;
  align-self: end;
  justify-self: stretch;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.dtrs-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(184,135,35,.6), rgba(247,215,116,.85), rgba(184,135,35,.6));
  border-radius: 2px;
}
.dtrs-slider::-moz-range-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(184,135,35,.6), rgba(247,215,116,.85), rgba(184,135,35,.6));
  border-radius: 2px;
}
.dtrs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #fff3b0, #e6b84c 50%, #a8741f);
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0 0 12px rgba(247,215,116,.55);
  cursor: grab;
}
.dtrs-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #fff3b0, #e6b84c 50%, #a8741f);
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(247,215,116,.55);
  cursor: grab;
}

/* primary gold CTA — reuses brand pill style without depending on site CSS */
.dtrs-cta {
  grid-area: cta;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  text-decoration: none;
  color: #131313;
  border: 1px solid rgba(184,135,35,.7);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #f7d774 0%, #e6b84c 35%, #c9972b 70%, #a8741f 100%);
  box-shadow: 0 6px 20px rgba(184,135,35,.32),
              inset 0 1px 0 rgba(255,243,176,.45);
  transition: filter .18s, box-shadow .18s, transform .14s;
}
.dtrs-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 28px rgba(184,135,35,.46),
              inset 0 1px 0 rgba(255,243,176,.55);
  transform: translateY(-1px);
}
.dtrs-cta:active { transform: translateY(0); }
.dtrs-cta::after {
  content: '→';
  font-size: 14px;
  margin-left: 2px;
}

/* mobile: drop slider, stack headline above buttons, smaller CTA */
@media (max-width: 720px) {
  .dtrs-ui {
    grid-template-areas:
      "headline headline"
      ".         .       "
      "replay   cta     ";
    grid-template-columns: auto 1fr;
  }
  .dtrs-slider { display: none; }
  .dtrs-cta { padding: 10px 18px; font-size: 12px; }
  .dtrs-headline { font-size: clamp(18px, 5vw, 24px); }
}

/* admin page-specific helpers — used by dtr-studio.html */
.dtrs-admin {
  background: #0a0f14;
  color: #f8f9fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.dtrs-admin-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.dtrs-admin h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.dtrs-admin .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b88723;
  margin-bottom: 18px;
}
.dtrs-admin-drops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0;
}
@media (max-width: 720px) { .dtrs-admin-drops { grid-template-columns: 1fr; } }
.dtrs-drop {
  border: 1.5px dashed rgba(184,135,35,.45);
  border-radius: 14px;
  padding: 28px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  transition: border-color .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.dtrs-drop:hover, .dtrs-drop.over {
  border-color: #e0b862;
  background: rgba(184,135,35,.08);
}
.dtrs-drop label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 10px;
}
.dtrs-drop .hint {
  color: rgba(255,255,255,.5);
  font-size: 13px;
}
.dtrs-drop input[type="file"] { display: none; }
.dtrs-drop .preview {
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1f25 center/cover no-repeat;
  border-radius: 14px;
  margin-top: 12px;
  display: none;
}
.dtrs-drop.has .preview { display: block; }
.dtrs-drop.has .hint { display: none; }

/* preview frame for the live cinematic */
.dtrs-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  background: #0e131a;
  border: 1px solid rgba(184,135,35,.22);
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
  position: relative;
  margin-top: 32px;
}
.dtrs-preview-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: 14px;
}

/* transition picker buttons */
.dtrs-picker {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dtrs-picker .opt {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.78);
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s;
}
.dtrs-picker .opt:hover {
  border-color: rgba(184,135,35,.55);
  color: #e0b862;
}
.dtrs-picker .opt.active {
  background: linear-gradient(135deg, rgba(247,215,116,.22), rgba(184,135,35,.22));
  border-color: #e0b862;
  color: #fff3b0;
  box-shadow: 0 0 18px rgba(184,135,35,.25);
}

/* form fields (advanced options) */
.dtrs-fields {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .dtrs-fields { grid-template-columns: 1fr; } }
.dtrs-fields label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.dtrs-fields input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: #f8f9fa;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .18s, background .18s;
}
.dtrs-fields input:focus {
  border-color: #e0b862;
  background: rgba(255,255,255,.06);
  outline: none;
}

/* action buttons row */
.dtrs-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.dtrs-act {
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid rgba(184,135,35,.55);
  color: #e0b862;
  background: transparent;
  cursor: pointer;
  transition: all .18s;
}
.dtrs-act:hover {
  background: rgba(184,135,35,.1);
  border-color: #f7d774;
  color: #fff3b0;
}
.dtrs-act.primary {
  background: linear-gradient(135deg, #f7d774 0%, #e6b84c 35%, #c9972b 70%, #a8741f 100%);
  color: #131313;
  border-color: rgba(184,135,35,.7);
}
.dtrs-act.primary:hover { filter: brightness(1.08); }

/* embed code box */
.dtrs-embed {
  margin-top: 28px;
}
.dtrs-embed textarea {
  width: 100%;
  min-height: 110px;
  padding: 16px;
  background: #0a0f14;
  border: 1px solid rgba(184,135,35,.22);
  border-radius: 12px;
  color: #e0b862;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
}
.dtrs-embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dtrs-embed-bar h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  color: #f8f9fa;
}