/* ==========================================================================
   ClearStartAI — the furniture visualisation film: the player
   Styles for furniture-visualisation-film.html, shown on its own or embedded
   in furniture-visualisation.html (?embed=1, inside an iframe).

   The film is an MP4 (assets/video/furniture-film.mp4), recorded from its
   animated source in docs/furniture-film/. The script sets --w, the frame's
   width on screen, on .fp-player; the frame is 4:5 (1080 × 1350).

   Not loaded with core.css: the page is self-contained so the embed stays
   light. Class names carry an fp- prefix.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink-950: #03070D;
  --ink-900: #071120;
  --ink-850: #0A1828;
  --line: rgba(150, 200, 235, 0.16);
  --text: #EAF2F9;
  --muted: #8397AD;
  --soft: #A6BACE;
  --sky: #259ACA;
  --cyan: #39C6C8;
  --gradient: linear-gradient(100deg, #1B67AF 0%, #259ACA 34%, #39C6C8 68%, #76DBB9 100%);
  --display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

[hidden] { display: none !important; }

html {
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink-950);
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page: a slim header and the film, nothing else
   -------------------------------------------------------------------------- */

.fp-top {
  position: relative;
  z-index: 2;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  background: var(--ink-950);
}

.fp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fp-brand img { width: 30px; height: 30px; }
.fp-brand em { font-style: normal; color: var(--cyan); }

.fp-top__nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.4vw, 28px);
  margin-left: auto;
}

.fp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--soft);
}

.fp-back svg { width: 16px; height: 16px; flex: none; }
.fp-back:hover { color: var(--text); }

.fp-start {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 99px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-950);
  background: var(--sky);
}

.fp-start:hover { background: var(--cyan); }

@media (max-width: 520px) {
  .fp-start { display: none; }
}

@media (max-width: 380px) {
  .fp-back span { display: none; }
}

/* The film as large as the window allows under the header. The script sizes
   the frame to fit the player's box, so that box must never take its size
   from the frame: the grid tracks are allowed to shrink. The frame and its
   bar sit together in the middle. */
.fp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  min-height: 420px;
}

.fp-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 3vh, 32px) clamp(16px, 3vw, 32px);
}

.fp-wrap {
  display: grid;
  place-items: center;
  width: 100%;
}

/* Embedded: the frame and its bar fill the iframe. */
.is-embed,
.is-embed body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--ink-900);
}

.is-embed .fp-top { display: none; }

.is-embed .fp-main {
  display: block;
  height: 100%;
  min-height: 0;
}

.is-embed .fp-player { padding: 0; }

/* Full screen: the player alone, on the darkest ink. */
.fp-player.is-fs {
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--ink-950);
}

/* --------------------------------------------------------------------------
   The frame
   -------------------------------------------------------------------------- */

/* Until the poster arrives: the film's own grid and glow. */
.fp-screen {
  position: relative;
  width: var(--w, 360px);
  height: calc(var(--w, 360px) * 1.25);
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(70% 45% at 85% 0%, rgba(37, 154, 202, 0.3), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(57, 198, 200, 0.14), transparent 70%),
    linear-gradient(to right, rgba(150, 200, 235, 0.055) 1px, transparent 1px) 0 0 / calc(var(--w, 360px) / 15) calc(var(--w, 360px) / 15),
    linear-gradient(to bottom, rgba(150, 200, 235, 0.055) 1px, transparent 1px) 0 0 / calc(var(--w, 360px) / 15) calc(var(--w, 360px) / 15),
    var(--ink-900);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.is-embed .fp-screen,
.is-fs .fp-screen { border-radius: 0; }

.fp-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Without the script, the browser's own controls run the film. */
html:not(.js) .fp-screen { cursor: auto; }

html:not(.js) .fp-bar,
html:not(.js) .fp-big,
html:not(.js) .fp-flash,
html:not(.js) .fp-load,
html:not(.js) .fp-cta { display: none; }

html:not(.js) .fp-screen { border-radius: 14px; }

/* Buffering mid-film: a brand line shimmers along the bottom edge. */
.fp-load {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 3px;
  background: var(--gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fp-player.is-buffering .fp-load {
  opacity: 1;
  animation: fp-pulse 1.2s ease-in-out infinite;
}

@keyframes fp-pulse {
  50% { opacity: 0.35; }
}

/* Play the film / Watch again: over the poster, and after the end card. */
.fp-big {
  position: absolute;
  left: 50%;
  top: 77%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 1.35em 0.55em 0.55em;
  border-radius: 99px;
  font-family: var(--display);
  font-size: clamp(14px, calc(var(--w, 360px) * 0.034), 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #fff;
  background: rgba(7, 17, 32, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(57, 198, 200, 0.45), 0 22px 50px -18px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s, box-shadow 0.2s ease;
}

.fp-player:is([data-state="idle"], [data-state="ended"]) .fp-big,
.fp-player.is-waiting .fp-big {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, box-shadow 0.2s ease;
}

.fp-player[data-state="ended"] .fp-big { top: 89%; }

.fp-big:hover { box-shadow: inset 0 0 0 1px var(--cyan), 0 22px 50px -18px rgba(0, 0, 0, 0.9); }

.fp-big__icon {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 6px 18px -6px rgba(57, 198, 200, 0.8);
  transition: transform 0.2s ease;
}

.fp-big:hover .fp-big__icon { transform: scale(1.06); }

.fp-big__icon svg { width: 1.05em; height: 1.05em; }

.fp-big__len {
  font-family: var(--mono);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--soft);
}

.fp-player.is-waiting .fp-big__len,
.fp-player[data-state="ended"] .fp-big__len { display: none; }

/* A play or pause sign that blooms and fades when the frame is clicked. */
.fp-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(3, 7, 13, 0.62);
  opacity: 0;
  pointer-events: none;
}

.fp-flash svg { width: 30px; height: 30px; }
.fp-flash.is-on { animation: fp-flash 0.65s ease-out both; }

@keyframes fp-flash {
  from { opacity: 1; transform: scale(0.8); }
  to { opacity: 0; transform: scale(1.3); }
}

/* The end card's two buttons, which are part of the picture: links sit over
   them (positions measured from the film at 1080 × 1350) and answer clicks
   once both buttons are on screen (.is-cta, set by the script). */
.fp-cta {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.fp-cta__link {
  position: absolute;
  border-radius: 99px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-cta__link--start { left: 33.32%; top: 61.4%; width: 33.36%; height: 6.37%; }
.fp-cta__link--web { left: 29.11%; top: 69.25%; width: 41.78%; height: 5.41%; }

.fp-screen.is-cta .fp-cta__link { pointer-events: auto; }

.fp-screen.is-cta .fp-cta__link:hover,
.fp-screen.is-cta .fp-cta__link:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 2px var(--cyan);
  outline: none;
}

/* The player's own flourishes step aside for visitors who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .fp-flash.is-on,
  .fp-player.is-buffering .fp-load { animation: none; }
  .fp-big,
  .fp-big__icon,
  .fp-seek__thumb,
  .fp-seek__track { transition: none; }
}

/* --------------------------------------------------------------------------
   The control bar
   -------------------------------------------------------------------------- */

.fp-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: var(--w, 360px);
  height: 48px;
  padding: 0 6px;
  border-radius: 0 0 14px 14px;
  background: var(--ink-850);
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 13px;
}

.is-embed .fp-bar,
.is-fs .fp-bar { border-radius: 0; }

.fp-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--text);
}

.fp-btn:hover { background: rgba(150, 200, 235, 0.1); }
.fp-btn svg { width: 20px; height: 20px; }

/* One button, three signs; the script names the one to show. */
[data-icon] .i-play,
[data-icon] .i-pause,
[data-icon] .i-replay,
[data-icon] .i-enter,
[data-icon] .i-exit { display: none; }

[data-icon="play"] .i-play,
[data-icon="pause"] .i-pause,
[data-icon="replay"] .i-replay,
[data-icon="enter"] .i-enter,
[data-icon="exit"] .i-exit { display: block; }

.fp-time {
  flex: none;
  padding: 0 6px 0 2px;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}

.fp-time b { font-weight: 500; color: var(--text); }

@media (max-width: 330px) {
  .fp-time__total { display: none; }
}

.fp-seek {
  --p: 0%;
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0 8px;
  cursor: pointer;
  touch-action: none;
}

.fp-seek:focus-visible { outline-offset: 0; border-radius: 6px; }

.fp-seek__track {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(150, 200, 235, 0.2);
  transition: height 0.15s ease;
}

.fp-seek:hover .fp-seek__track,
.fp-seek:focus-visible .fp-seek__track,
.fp-seek.is-scrub .fp-seek__track { height: 6px; }

/* The fill reveals one fixed gradient, rather than squeezing it. */
.fp-seek__fill {
  position: absolute;
  inset: 0;
  background: var(--gradient);
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
}

/* Chapter breaks: small gaps in the track. */
.fp-seek__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--ink-850);
}

.fp-seek__thumb {
  position: absolute;
  top: 50%;
  left: var(--p);
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57, 198, 200, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
  transform: scale(0);
  transition: transform 0.15s ease;
  pointer-events: none;
}

.fp-seek:hover .fp-seek__thumb,
.fp-seek:focus-visible .fp-seek__thumb,
.fp-seek.is-scrub .fp-seek__thumb,
.fp-player[data-state="paused"] .fp-seek__thumb { transform: scale(1); }

.fp-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
  background: rgba(3, 7, 13, 0.94);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -8px rgba(0, 0, 0, 0.8);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Opening the film on its own page only makes sense from the embed. */
html:not(.is-embed) .fp-only-embed { display: none; }