/* =========================
   SPARK Studio — Light UI
   ========================= */

/* ----- Fonts (TTF) ----- */
@font-face{
  font-family: "Ember Modern";
  src: url("../assets/fonts/EmberModernDisplayStd-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Ember Modern";
  src: url("../assets/fonts/EmberModernDisplayStd-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- Amazon Ember (TTF) ----- */
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_Th.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_ThIt.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_Lt.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_LtIt.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_Rg.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_RgIt.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_Bd.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_BdIt.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_He.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Amazon Ember";
  src: url("../assets/fonts/AmazonEmber_HeIt.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ----- Base ----- */
:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f5f5f5;
  --panel-soft-2: #f2f2f2;
  --ink: #111111;
  --muted: #6d6d6d;
  --muted-2:#8b8b8b;

  --line: #e9e9e9;
  --shadow: 2px 4px 1px rgba(0, 0, 0, 0.05);

  --chip: #f0eaf6;
  --chip-active: #e6dbf5;

  --accent: #ff7a00;       /* orange */
  --accent-2: #f2b0ff;     /* pink */
  --select: #ff7a00;

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

html, body{
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Ember Modern", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
}

*{ box-sizing: border-box; }

input, button, select, textarea{
  font-family: "Ember Modern", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Small UI icon (used in sidebar section headers) */
.section-icon{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  opacity: 0.85;
}

/* ====== Layout ====== */
body{
  margin: 0;
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
}

/* ====== Sidebar ====== */
.sidebar{
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 28px 18px 18px 18px;
  overflow: auto;
}

.sidebar-header{
  padding: 8px 10px 18px 10px;
}

.brand-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}

.brand-logo{
  width: 34px;
  height: 34px;
  display:block;
}

.brand-title{
  font-size: 34px;
  letter-spacing: normal;
  line-height: 1;
  display:flex;
  align-items: baseline;
  gap: 8px;
}
.brand-title .spark{
  font-weight: 700; /* SPARK bold */
}
.brand-title .studio{
  font-weight: 400; /* Studio regular */
}

/* Nav pill */
.spark-nav{
  width: 100%;
  background: var(--chip);
  border-radius: 18px;
  padding: 10px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.spark-nav a{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  opacity: .9;
}
.spark-nav a.active{
  background: var(--chip-active);
}
.spark-nav img{
  width: 20px;
  height: 20px;
  display:block;
}

/* Panels */
.sidebar-section{
  margin-top: 18px;
  padding: 0 10px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
}

.section-toggle{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 0;
}
.section-toggle:hover{
  background: rgba(0,0,0,.04);
}
.section-toggle svg{
  width: 18px;
  height: 18px;
  display:block;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.section-toggle[aria-expanded="false"] svg{
  transform: rotate(-90deg);
}

.panel{
  background: var(--panel-soft);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: none;
}

/* Inputs (rounded pills like ref) */
.form-field{
  margin-bottom: 12px;
}

.form-field label{
  display:block;
  font-size: 14px;
  color: var(--muted-2);
  margin-bottom: 8px;
}

/* ====== Brand Palette Picker (color swatches) ====== */
.spark-palette-selected{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,17,17,0.55);
  margin-top: -2px;
}

.spark-palette-groups{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spark-palette-group-title{
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,17,17,0.70);
  margin-bottom: 8px;
}

.spark-palette-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spark-palette-swatch{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,0.18);
  box-shadow: var(--shadow);
  padding: 0;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.spark-palette-swatch:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,0.30);
}

.spark-palette-swatch.is-selected{
  outline: 3px solid rgba(255,122,0,0.35);
  border-color: rgba(255,122,0,0.55);
}

.text-input{
  width: 100%;
  height: 44px;
  border: 0;
  outline: none;
  border-radius: 18px;
  background: var(--panel-soft-2);
  padding: 0 16px;
  color: var(--ink);
  font-size: 14px;
}
.text-input::placeholder{
  color: #9a9a9a;
}

/* ====== Upload Drop Zone (clean, no “Choose file…”) ====== */
.photo-drop-zone{
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--panel-soft);
  padding: 14px;
}

.dropbox{
  width: 100%;
  height: 74px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px dashed #cfcfcf;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px 14px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}

.dropbox small{
  display:block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}

/* Make the actual input clickable but invisible */
.photo-drop-zone input[type="file"]{
  position:absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Dragover style hook (your JS already adds highlight in many versions) */
.photo-drop-zone.is-dragover .dropbox{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,122,0,.18);
}

/* Frame.io box */
.frameio-shell{
  background: #ffffff;
  border-radius: var(--radius-lg);
  height: 210px;
  overflow: hidden;
}

/* ====== Sliders (closer to mock) ====== */
.slider-block{
  margin-top: 10px;
  background: transparent;
}

.slider-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.slider-row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.slider-label{
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink);
}

.slider-value{
  color: var(--muted);
  font-size: 13px;
}

/* range reset */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width: 100%;
  height: 24px;
  background: transparent;
}

/* track */
input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  background: #d8d8d8;
  border-radius: 999px;
}
input[type="range"]::-moz-range-track{
  height: 4px;
  background: #d8d8d8;
  border-radius: 999px;
}

/* thumb */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: -7px; /* centers on 4px track */
  border: 0;
}
input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  border: 0;
}

/* ====== Export button ====== */
.export-button{
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: var(--shadow);
}

/* ====== Main canvas area ====== */
.main-area{
  position: relative;
  overflow: hidden;
}

/* Grid background + parallax-ready */
.main-area::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0; /* JS can adjust this for parallax */
  pointer-events:none;
}

/* Horizontal scroll lane */
.canvas-scroll{
  position: relative;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 34px 46px;
  scroll-behavior: smooth;
}

/* Center the whole row within the scroll area */
.previews-column{
  position: relative;
  display: flex;
  gap: 56px;
  width: fit-content;
  margin: 0 auto;       /* centers when content fits */
  align-items: flex-start;
}

/* Preview cards */
.preview-wrapper{
  width: 520px;
}

.preview-label-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--ink);
}

.preview-title{
  font-weight: 700;
  font-size: 16px;
}

.preview-label-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Export checkbox row */
.preview-export-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  user-select:none;
}
.preview-export-toggle input{
  width: 16px;
  height: 16px;
}

/* Tag pill */
.preview-tag{
  font-size: 11px;
  letter-spacing: normal;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0f0f0;
  color: var(--muted);
}

/* Canvas shell with rounded corners */
.preview-canvas-shell{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  box-shadow: var(--shadow);
  border: px solid transparent;
}

/* Selected stroke */
.preview-wrapper.selected .preview-canvas-shell{
  border-color: var(--select);
}

/* Fix “stroke too tall” feeling: make border sit on the shell, not the wrapper */
.preview-wrapper.selected{
  outline: none;
}

/* Videos behind canvases */
.bg-video{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display:none; /* JS shows when video active */
}

/* Canvas fills shell */
.preview-canvas-shell canvas{
  display:block;
  width: 100%;
  height: auto;
}

/* Preview playback controls (pause + scrub) */
.preview-playback-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

.preview-playback-btn{
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.72);
  color: rgba(17,17,17,0.92);
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.preview-playback-btn:active{
  transform: translateY(1px);
}

.preview-playback-icon--play{ display: none; }
.preview-playback-btn.is-paused .preview-playback-icon--play{ display: inline-flex; }
.preview-playback-btn.is-paused .preview-playback-icon--pause{ display: none; }

/* Staging uses its own selection controls; keep previews clean there. */
#staging-root .preview-playback-row{
  display: none;
}

/* Fullscreen */
#fullscreen-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index: 9999;

  /* ensure centering */
  align-items: center;
  justify-content: center;
}
#fullscreen-overlay.show{ display:flex; }

.fullscreen-inner{
  margin: auto;
  width: min(1200px, 92vw);
  height: 92vh;               /* IMPORTANT: gives a real height to work with */
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;

  display: flex;
  flex-direction: column;
}

#fullscreen-close{
  position:absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

#fullscreen-title{
  text-align:center;
  font-weight: 700;
  margin: 10px 0 12px 0;
  flex: 0 0 auto;
}

/* This is the key: shell hugs the "stage" width */
.fullscreen-canvas-shell{
  flex: 1 1 auto;
  max-height: calc(92vh - 90px); /* room for title/padding */
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

/* NEW: The stage is what we "hug" */
.fullscreen-stage{
  height: 100%;          /* 100% height */
  width: fit-content;    /* hug width */
  max-width: 100%;

  display: grid;         /* stack video + canvas */
  place-items: center;
}

/* Stack both in the same grid cell */
.fullscreen-stage > video,
.fullscreen-stage > canvas{
  grid-area: 1 / 1;

  height: 100%;
  width: auto;           /* auto width from intrinsic aspect ratio */
  max-width: 100%;
  display: block;
}

/* Background video behavior */
.fullscreen-stage > video{
  object-fit: cover;     /* keep your "cover" look */
  object-position: center;
}


/* Utility: hide collapsed sections */
.section-collapsed{
  display:none !important;
}