/**
 * SM AI STUDIO - THEME LAYER
 *
 * Everything the SM skin needs that Tailwind's config cannot express: the brand
 * typeface, the key-visual background field, the two-part cursor, the entrance
 * motion, and a handful of targeted overrides for values baked into the
 * prebuilt bundle.
 *
 * Shared by index.html and mobile.html so there is one source of truth.
 * Purely presentational - every added layer is pointer-events: none.
 */

:root {
  /* ground */
  --sm-base: #FFE1E9;
  --sm-base-deep: #FBD3DE;
  --sm-line: #F0C8D5;
  --sm-line-strong: #E2AEBF;

  /* ink */
  --sm-ink: #1a1a1a;
  --sm-muted: #6B5A60;
  --sm-faint: #8A737B;

  /* SM Group navy, with mid-tones so the jump from the pale ground is not raw */
  --sm-navy: #223055;
  /* CI value - accents, type, active states */
  --sm-navy-deep: #1B2745;
  --sm-navy-soft: #33406B;
  --sm-navy-mid: #6E799A;
  --sm-navy-tint: #C7CDDC;
  --sm-navy-wash: #EDEFF5;
}

/* ------------------------------------------------------------------- type */

@font-face {
  font-family: 'SMTOWN';
  src: url('/assets/fonts/SMTOWN-Regular.otf') format('opentype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'SMTOWN', 'Inter', sans-serif;
  background-color: var(--sm-base);
  color: var(--sm-ink);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--sm-navy);
  color: #fff;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--sm-base);
}

::-webkit-scrollbar-thumb {
  background: var(--sm-line);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sm-line-strong);
}

/* -------------------------------------------------------- key visual field */

/* The SM Group key visual sits behind everything at a negative stacking index,
   so it paints above the body background and below all content without
   entering the app's own z-index ladder. */
#sm-brandfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}

#sm-brandfield img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The app paints its ground with `bg-black`, which the config maps to the SM
   base. Holding it a little short of opaque lets the field read through as a
   tone instead of being buried. The /50, /80, /95 opacity variants are separate
   class names and keep their own values. */
.bg-black {
  background-color: rgba(255, 225, 233, 0.82) !important;
}

/* ---------------------------------------------------------- navy accents */

/* `bg-white` / `border-white` were the dark theme's inverted primary surfaces
   (solid buttons, active states). The config maps `white` to the ink so the
   text-white type lands on #1a1a1a; these lift the solid surfaces to the SM
   navy CI value, which is where the brand wants them. The /10 and /20 variants
   are separate class names, so they keep the subtle ink veil. */
.bg-white {
  background-color: var(--sm-navy) !important;
}

.border-white {
  border-color: var(--sm-navy) !important;
}

/* `placeholder-zinc-800` resolves to the line colour, too faint to read as
   text. SM AI Studio uses #B08E9B for placeholders. */
input::placeholder,
textarea::placeholder {
  color: #B08E9B !important;
  opacity: 1;
}

/* SM brand mark - replaces the text wordmark, layout untouched */
.sm-mark {
  display: block;
  width: 190px;
  max-width: 60vw;
  height: auto;
  margin: 0 auto;
}

/* the in-app header lockup runs much smaller than the splash one */
.sm-mark-sm {
  display: block;
  width: 104px;
  max-width: 40vw;
  height: auto;
}

/* --------------------------------------------------- split landing panels */

/* SM AI Studio's landing is two halves: a navy channel and a pale one, each
   carrying the key visual in the tone that reads on it. The original app's
   landing is also two panels (CREATE / RENDER), so they map straight across -
   CREATE takes the navy half, RENDER the pale one.

   Only the two panel elements were given marker classes in the bundle; their
   click handlers, children and layout classes are untouched. Everything below
   is scoped to those markers and selects by element type rather than by the
   bundle's utility classes, so a future rebuild cannot silently break it. */

.sm-panel {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .5s ease,
    background-color .5s ease;
  will-change: transform;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sm-panel:hover {
  transform: scale(1.012);
}

/* navy half — a gradient rather than a flat CI-navy slab: at half-screen the
   pure value sits very heavy against the pale ground.

   Layer order matters: in `background-image` the FIRST value paints on top, so
   the key visual has to come before the gradient or the opaque gradient buries
   it. The SVG's transparent areas then let the gradient through. */
.sm-panel-navy {
  background-color: var(--sm-navy) !important;
  background-image: url('/assets/sm-brandfield-light.svg'),
    linear-gradient(160deg, #33406B 0%, #223055 55%, #1B2745 100%);
}

.sm-panel-navy:hover {
  background-image: url('/assets/sm-brandfield-light.svg'),
    linear-gradient(160deg, #3A4778 0%, #273760 55%, #1F2C4E 100%);
}

/* type on the navy half flips to light; the bundle's zinc greys are unreadable
   there, so they are overridden by element role */
.sm-panel-navy h2 {
  color: rgba(255, 255, 255, .5) !important;
  transition: color .3s ease;
}

.sm-panel-navy:hover h2 {
  color: #fff !important;
}

.sm-panel-navy p,
.sm-panel-navy span {
  color: rgba(255, 255, 255, .3) !important;
  transition: color .3s ease;
}

.sm-panel-navy:hover p,
.sm-panel-navy:hover span {
  color: rgba(255, 255, 255, .65) !important;
}

.sm-panel-navy svg {
  color: rgba(255, 255, 255, .45) !important;
}

/* the thin vertical hairline above the label */
.sm-panel-navy .w-px {
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .45), transparent) !important;
  background-color: transparent !important;
}

/* the hover vignette overlay reads as a dark wash on navy */
.sm-panel-navy>.absolute.inset-0 {
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, .28), transparent 70%) !important;
}

/* pale half — SM AI Studio sets the label in navy at low opacity rather than a
   neutral grey, so it reads as brand rather than as UI chrome */
.sm-panel-base {
  background-color: var(--sm-base) !important;
  background-image: url('/assets/sm-brandfield.svg');
}

.sm-panel-base:hover {
  background-color: var(--sm-base-deep) !important;
}

.sm-panel-base h2 {
  color: rgba(34, 48, 85, .4) !important;
  transition: color .3s ease;
}

.sm-panel-base:hover h2 {
  color: var(--sm-navy) !important;
}

.sm-panel-base p,
.sm-panel-base span {
  color: rgba(34, 48, 85, .3) !important;
  transition: color .3s ease;
}

.sm-panel-base:hover p,
.sm-panel-base:hover span {
  color: rgba(34, 48, 85, .7) !important;
}

.sm-panel-base svg {
  color: rgba(34, 48, 85, .45) !important;
}

.sm-panel-base .w-px {
  background-image: linear-gradient(to bottom, transparent, rgba(34, 48, 85, .4), transparent) !important;
  background-color: transparent !important;
}

/* ------------------------------------------------ landing header lockup */

/* The landing's <header> is the only one in the app (the inner pages use
   <nav>), and its visible column sits over the navy half. The SM lockup is
   black linework, so it is flipped to white here rather than shipping a second
   PNG; transparent pixels keep their alpha through the filter. */
header .sm-mark-sm {
  filter: brightness(0) invert(1);
  opacity: .9;
}

header>div:first-child span {
  color: rgba(255, 255, 255, .45) !important;
}

/* ---------------------------------------------------------------- refinement */

/* The stock sparkle icon made the app feel like a generic AI template. Keep
   the existing "change mode" button and its event handler, but turn its icon
   holder into the small SM mark. */
nav button:first-child > div:first-child {
  width: 24px !important;
  height: 18px !important;
  min-width: 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url('/assets/sm-mark.png') center / contain no-repeat !important;
}

nav button:first-child > div:first-child svg {
  display: none !important;
}

/* The empty-output module should read as part of the workspace, not as a
   white card dropped on top of a pink canvas. */
.sm-output-dropzone {
  background-color: rgba(255, 225, 233, .5) !important;
  border-color: var(--sm-line) !important;
}

.sm-output-dropzone:hover {
  background-color: rgba(251, 211, 222, .68) !important;
}

.sm-output-dropzone > div {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 10px !important;
  background-color: rgba(34, 48, 85, .08) !important;
}

.sm-output-dropzone p {
  font-size: 9px !important;
  letter-spacing: .22em !important;
  color: var(--sm-muted) !important;
}

/* The landing is deliberately quieter than the first pass: it carries the
   SM type scale, while the key visual is one continuous field behind both
   channels instead of two clipped illustrations. */
.sm-landing {
  position: relative;
  isolation: isolate;
}

.sm-landing::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url('/assets/sm-brandfield.svg') center / cover no-repeat;
  opacity: .28;
}

.sm-landing .relative.z-10,
.sm-landing header {
  z-index: 2;
}

.sm-landing .sm-panel {
  background-image: none !important;
}

.sm-landing .sm-panel-navy {
  background: linear-gradient(160deg, #33406B 0%, #223055 58%, #1B2745 100%) !important;
}

.sm-landing .sm-panel-base {
  background-color: rgba(255, 225, 233, .88) !important;
}

.sm-landing .sm-panel > .absolute.inset-0 {
  background-image: none !important;
}

.sm-landing h2 {
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
  letter-spacing: -.045em !important;
  font-weight: 400 !important;
}

.sm-landing p {
  margin-top: .7rem !important;
  font-size: 9px !important;
  letter-spacing: .26em !important;
}

.sm-landing .text-xs {
  font-size: 9px !important;
  letter-spacing: .12em !important;
  line-height: 1.7 !important;
}

@media (max-width: 768px) {
  .sm-landing h2 {
    font-size: clamp(1.75rem, 9vw, 2.45rem) !important;
  }
}

/* ----------------------------------------------------------------- cursor */

/* Both layers are transform-driven from a single rAF loop (see sm-cursor.js).
   `will-change` promotes them once, so no per-frame layer churn. */
.sm-cursor-dot,
.sm-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  border-radius: 9999px;
}

.sm-cursor-dot {
  width: 5px;
  height: 5px;
  background: var(--sm-navy);
  transition: opacity .16s ease;
}

/* Resting state is a capsule - the same stadium geometry as the SM mark. */
.sm-cursor-ring {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(34, 48, 85, .4);
  /* only colour/size transition here - the movement is rAF, not CSS */
  transition: opacity .16s ease, border-color .16s ease, background-color .16s ease,
    width .16s cubic-bezier(.22, .61, .36, 1), height .16s cubic-bezier(.22, .61, .36, 1),
    border-radius .16s ease;
}

/* Over anything clickable it opens into a rounded box, echoing the hover
   treatment on the SM corporate site. */
.sm-cursor-ring.is-active {
  width: 62px;
  height: 34px;
  border-radius: 17px;
  border-color: rgba(34, 48, 85, .8);
  background: rgba(34, 48, 85, .07);
}

/* over a text field the ring becomes a caret-like bar, so the I-beam
   affordance survives hiding the native cursor */
.sm-cursor-ring.is-text {
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--sm-navy);
  border-color: transparent;
}

body.sm-cursor-on,
body.sm-cursor-on * {
  cursor: none !important;
}

/* ----------------------------------------------------------------- motion */

/* Entrances. transform + opacity only, so these composite on the GPU and never
   trigger layout. */
@keyframes sm-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sm-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sm-rise {
  animation: sm-rise .5s cubic-bezier(.22, .61, .36, 1) both;
}

.sm-fade {
  animation: sm-fade .6s ease both;
}

/* stagger helpers - cheap, no JS */
.sm-d1 {
  animation-delay: .06s;
}

.sm-d2 {
  animation-delay: .12s;
}

.sm-d3 {
  animation-delay: .18s;
}

.sm-d4 {
  animation-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {

  .sm-rise,
  .sm-fade {
    animation: none;
  }
}