/* Cinematic Slider — slideshow compositions scoped under the block root.
   Values are the authoritative ozen-fast theme rules (ozen.css), re-declared
   plugin-locally so the block has no dependency on theme selectors or variables. */
.ozen-cinematic-slider[data-ozen-cinematic-slider] {
  --ocs-aspect-ratio: 16/9;
  --ocs-fade-duration: 1250ms;
  --ocs-motion-duration: 7000ms;
  --ocs-focal: center 50%;
  --ocs-viewport-width: 100%;
  touch-action: pan-y;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ocs-aspect-ratio);
  overflow: hidden;
  background: #111;
  isolation: isolate;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel,
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { aspect-ratio: auto; }

/* card is container-driven, but keeps the theme card's minimum height so the
   block is drop-in inside the Home highlights grid. */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { min-height: 615px; }
@media (max-width: 1100px) { .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { min-height: 600px; } }
@media (min-width: 801px) and (max-width: 960px) { .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { min-height: 560px; } }
@media (max-width: 400px) { .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { min-height: 530px; } }

/* halls-panel is full-bleed: it breaks out of the content gutter using the
   measured usable viewport width. The runtime supplies --ocs-viewport-width
   (never 100vw, which would overflow past a classic scrollbar); the fallback
   keeps the box in flow until the runtime measures. */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel {
  width: var(--ocs-viewport-width, 100%);
  margin-inline: calc(50% - var(--ocs-viewport-width, 100%) / 2);
}

/* --- Slide layer (halls-panel / card / plain) --- */
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slides,
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slide { position: absolute; inset: 0; margin: 0; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slide { opacity: 0; transition: opacity var(--ocs-fade-duration) ease; pointer-events: none; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--ocs-focal, center 50%);
  transform: scale(1.015); will-change: transform;
  -webkit-user-drag: none; user-select: none;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider][data-layout="card"] .ocs-slide img { transform: none; }
@keyframes ocs-cinematic-drift { from { transform: translate(var(--ocs-drift-x, 0%), var(--ocs-drift-y, 0%)) scale(1.015); } to { transform: translate(0, 0) scale(1.045); } }
@keyframes ocs-flyover {
  from { transform: translate(calc(var(--ocs-fly-x) + var(--ocs-drift-x, 0%)), calc(var(--ocs-fly-y) + var(--ocs-drift-y, 0%))) scale(1.08); }
  to { transform: translate(0, 0) scale(var(--ocs-fly-end-scale)); }
}

/* --- halls-panel: reproduces .hall-panel (the slideshow being replaced) --- */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel {
  min-height: clamp(500px, 62vw, 760px); background: #1b211e;
}
@media (max-width: 800px) { .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel { min-height: min(620px, 118svh); } }
@media (max-width: 560px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel { min-height: 520px; }
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-slide img { object-position: center; }
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-panel-shade {
  /* Persistent overlay: must sit above every image layer (the runtime promotes
     the outgoing slide to z-index 2 during a cross-fade) so the gradient never
     blinks out at a transition. Copy (4) and timer (5) stay above it. */
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 14, 12, calc(0.04 * var(--ocs-gradient-strength, 1))) 28%, rgba(10, 14, 12, calc(0.78 * var(--ocs-gradient-strength, 1))) 100%);
}

/* --- card: reproduces .card-media (container-driven) --- */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-shade {
  /* Same persistent-overlay rule as halls-panel: above both cross-fading images. */
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 17, 14, calc(0.06 * var(--ocs-gradient-strength, 1))) 10%, rgba(7, 17, 14, calc(0.22 * var(--ocs-gradient-strength, 1))) 40%, rgba(7, 17, 14, calc(0.7 * var(--ocs-gradient-strength, 1))) 64%, rgba(7, 17, 14, calc(0.97 * var(--ocs-gradient-strength, 1))) 100%);
}

/* Per-block gradient opt-out. Render omits the shade node entirely; this rule
   also covers cached/legacy markup and guarantees no residual tint or layer. */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-no-gradient .ocs-panel-shade,
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-no-gradient .ocs-card-shade {
  display: none !important; background: none !important;
}

/* --- Shared bottom-anchored copy --- */
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-copy { font-family: Jost, sans-serif; box-sizing: border-box; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-eyebrow { margin: 0 0 22px; font-size: 20px; font-weight: 500; letter-spacing: 0.2em; line-height: 1.6; text-transform: uppercase; color: inherit; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-description { color: inherit; }

/* halls-panel copy: bottom-anchored, positive tracking, scroll reveal. */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy {
  position: absolute; z-index: 4; right: 0; bottom: 0; left: 0;
  padding: clamp(30px, 5vw, 70px); color: #fffaf0;
  opacity: 0; transform: translate3d(var(--ocs-reveal-x, 42px), 0, 0);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy h2 {
  max-width: 950px; margin: 0; font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 300; letter-spacing: 0.015em; line-height: 1.05;
  text-transform: uppercase; text-wrap: balance; color: inherit; text-align: start;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy .ocs-description {
  display: grid; gap: 2px;
  max-width: 660px; margin: 18px 0 0; font-size: clamp(20px, 1.78vw, 25.3px);
  font-weight: 300; line-height: 1.42; text-align: start;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy .ocs-description span { display: block; }
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-panel-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  color: inherit; text-decoration: none; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-panel-cta svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 800px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy { padding: 28px 7%; }
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy h2 { max-width: 94%; font-size: clamp(25px, 7.4vw, 42px); line-height: 1.08; }
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy .ocs-description { max-width: 92%; margin-top: 14px; font-size: 20px; }
}

/* card copy: reproduces .card-copy (number + label, paragraph, bordered arrow link). */
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-copy {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px 30px 29px; color: #fff;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-title {
  max-width: none; margin: 0 0 14px;
  font-size: clamp(20px, 1.8vw, 26px); font-weight: 500;
  letter-spacing: 0.06em; line-height: 1.12; text-transform: uppercase;
  text-wrap: balance; color: inherit; text-align: start;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-title span { display: block; }
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-number {
  margin-bottom: 2px; font-size: 1.24em; font-weight: 400;
  letter-spacing: 0.1em; line-height: 1;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-description {
  max-width: 34ch; margin: 0 0 25px; color: rgba(255, 255, 255, 0.86);
  font-size: 20px; font-weight: 400; line-height: 1.65; text-align: start;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; margin-top: 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.9); text-decoration: none;
  font-size: clamp(14px, 1.45vw, 20px); font-weight: 500;
  letter-spacing: 0.16em; line-height: normal; text-transform: uppercase; white-space: nowrap;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-link:hover { color: #fff; border-top-color: #fff; }
.ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-arrow-up-right { width: 24px; height: 24px; flex: 0 0 24px; align-self: center; }
@media (max-width: 1100px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-copy { padding: 23px; }
}
@media (min-width: 801px) and (max-width: 960px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-copy { padding: 28px; }
}
@media (max-width: 800px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { min-height: 560px; }
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-copy { padding: 28px; }
}
@media (max-width: 400px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card { min-height: 530px; }
}
@media (max-width: 560px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-card-link { font-size: clamp(13px, 3.6vw, 17px); white-space: normal; }
}
@media (max-width: 400px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--card .ocs-copy { padding: 24px; }
}

/* --- 20 px transparent timer strip (2 px track + 2 px fill) --- */
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-timer {
  position: absolute; z-index: 5; inset: auto 0 0; width: 100%; height: 20px; padding: 0;
  border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-timer::before {
  content: ""; position: absolute; inset: auto 0 0; height: 2px; background: rgba(0, 0, 0, 0.5);
}
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-timer-fill {
  position: absolute; inset: auto 0 0; display: block; width: 100%; height: 2px; background: #fff;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}
/* Pause on Hover / Touch (1.6.0): the timer keeps its exact legacy 20 px strip
   geometry so it never grows over the card CTA. Only opt-in blocks receive a
   separate compact resume button, shown while touch-paused. It is a real 44 px
   touch/click target at the bottom-right corner, not a full-width overlay. */
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-resume {
  position: absolute; z-index: 6; right: 8px; bottom: 8px; box-sizing: border-box;
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 4px; background: rgba(0,0,0,.82); color: #fff;
  font: 500 12px/1.2 Jost, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-resume[hidden] { display: none; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-resume:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-timer[hidden] { display: none; }
.ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-timer:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* --- Adaptive Image Ratio (1.4.0) ---
   Server-rendered: the ratio and the attribute are printed by render.php, so the
   canvas is reserved before any image or script runs (no CLS). The canvas is
   sized to the tallest slide and every slide is contained inside it, so a mixed
   gallery never changes the canvas height between transitions. The height cap
   keeps a full-bleed portrait gallery from becoming taller than the viewport.
   Contained slides cannot be zoomed or translated without exposing edges, so
   photograph motion is suppressed here as well as in the runtime; fade, dwell,
   progress, shade and copy are untouched. */
.ozen-cinematic-slider[data-ozen-cinematic-slider][data-adaptive="true"] {
  min-height: 0;
  width: 100%;
  margin-inline: 0;
  aspect-ratio: var(--ocs-adaptive-ratio, var(--ocs-aspect-ratio));
  max-height: var(--ocs-adaptive-max-height, min(88svh, 960px));
}
.ozen-cinematic-slider[data-ozen-cinematic-slider][data-adaptive="true"] .ocs-slide img {
  object-fit: contain;
  object-position: center;
  transform: none !important;
  animation: none !important;
  will-change: auto;
}

/* --- Reduced motion: no zoom, no reveal --- */
@media (prefers-reduced-motion: reduce) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slide { transition: none !important; }
  .ozen-cinematic-slider[data-ozen-cinematic-slider] .ocs-slide img { animation: none !important; transform: none !important; }
  .ozen-cinematic-slider[data-ozen-cinematic-slider].ocs-layout--halls-panel .ocs-copy { opacity: 1; transform: none; transition: none; }
}

/* --- Heading Font Size (1.5.0) ---
   An explicit per-slider overlay heading size. render.php prints
   data-heading-size + --ocs-heading-size (desktop px) only when the author set a
   size and a heading is actually rendered; no attribute means every preset rule
   above stays exactly as it is. Only font-size changes here: Jost family, weight,
   line-height, letter-spacing, max-width, alignment and the card number's 1.24em
   relationship are inherited untouched.

   Desktop honours the chosen px exactly (scale 1). Below desktop the size is
   multiplied by a unitless scale that mirrors the halls-panel preset's own fluid
   curve (4.4vw, capped at <=800px), so a custom size shrinks proportionally
   instead of staying desktop-sized. 1440 -> 1.0, 1024 -> 0.8, 768 -> 0.66,
   390 -> 0.46. The clamp() floor only guards against an unusable size; the upper
   bound is the author's own px, so a custom size never grows past it. */

.ozen-cinematic-slider[data-ozen-cinematic-slider][data-heading-size] {
  --ocs-heading-scale: 1;
}
.ozen-cinematic-slider[data-ozen-cinematic-slider][data-heading-size].ocs-layout--halls-panel .ocs-copy h2,
.ozen-cinematic-slider[data-ozen-cinematic-slider][data-heading-size].ocs-layout--card .ocs-copy .ocs-card-title {
  font-size: clamp(10px, calc(var(--ocs-heading-size) * var(--ocs-heading-scale)), var(--ocs-heading-size));
}
@media (max-width: 1200px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider][data-heading-size] { --ocs-heading-scale: 0.8; }
}
@media (max-width: 900px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider][data-heading-size] { --ocs-heading-scale: 0.66; }
}
@media (max-width: 640px) {
  .ozen-cinematic-slider[data-ozen-cinematic-slider][data-heading-size] { --ocs-heading-scale: 0.46; }
}