/* ==========================================================================
   TouchTraks Solutions Carousel — full cinematic edition
   Portrait cards ride a circular arc with the active one upright at its apex,
   over a dark, slowly moving particle-and-light background.
   Fully self-contained: no WordPress / Elementor / framework CSS required.
   Geometry (card size, radius, apex) is measured in script.js and written to
   the custom properties below, so the layout always fits the iframe height.

   Layering (back to front):
     .tt-bg (lights, haze, particles)   z 0
     .tt-stage (cards)                  z 1
     .tt-fade (dark overlay behind copy) z 2
     .tt-content (copy, button, nav)    z 3
   ========================================================================== */

:root {
  --tt-bg: #0b0d10;
  --tt-bg-deep: #080a0c;
  --tt-bg-soft: #101214;
  --tt-accent: 124, 104, 196; /* deep muted purple, always used at very low opacity */
  --tt-ink: #ffffff;
  --tt-muted: rgba(255, 255, 255, 0.7);
  --tt-dim: rgba(255, 255, 255, 0.55);
  --tt-line: rgba(255, 255, 255, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* the iframe has a fixed height; nothing should scroll */
  background: var(--tt-bg);
}

/* ?bg=transparent on the URL lets the parent page's background show through. */
html.tt-transparent,
html.tt-transparent body {
  background: transparent;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  color: var(--tt-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* --- Root --------------------------------------------------------------- */

.tt-arc {
  /* Defaults; script.js overwrites the geometry on load and resize. */
  --tt-card-w: 320px;
  --tt-card-h: 426px;
  --tt-r: 900px;
  --tt-apex: 240px;
  --tt-content-top: 480px;
  --tt-radius: 22px;
  --tt-dur: 760ms;
  --tt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  outline: none;
  touch-action: pan-y; /* vertical swipes still scroll the parent page */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.tt-arc.is-dragging {
  cursor: grabbing;
}

.tt-arc:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* --- Cinematic background ---------------------------------------------- */

.tt-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--tt-bg-soft) 0%, transparent 60%),
    linear-gradient(180deg, var(--tt-bg) 0%, var(--tt-bg-deep) 100%);
}

.tt-bg > * {
  position: absolute;
  pointer-events: none;
}

/* Slow drifting haze across the whole frame. */
.tt-bg__haze {
  inset: -20%;
  background:
    radial-gradient(40% 30% at 30% 40%, rgba(var(--tt-accent), 0.05), transparent 70%),
    radial-gradient(35% 25% at 70% 65%, rgba(200, 210, 225, 0.03), transparent 70%);
  animation: tt-haze 48s ease-in-out infinite alternate;
}

/* Large, very soft light shapes. Radial gradients do the blur, which is much
   cheaper than filter: blur() on an element this size. */
.tt-bg__light {
  border-radius: 50%;
  will-change: transform;
}

.tt-bg__light--a {
  left: -15%;
  top: -10%;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(circle, rgba(var(--tt-accent), 0.11) 0%, rgba(var(--tt-accent), 0.04) 35%, transparent 65%);
  animation: tt-drift-a 42s ease-in-out infinite alternate;
}

.tt-bg__light--b {
  right: -20%;
  bottom: -25%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(215, 222, 235, 0.06) 0%, rgba(215, 222, 235, 0.02) 38%, transparent 65%);
  animation: tt-drift-b 54s ease-in-out infinite alternate;
}

.tt-bg__particles {
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tt-bg__vignette {
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(4, 5, 6, 0.65) 100%);
}

@keyframes tt-drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18vw, 10vh, 0) scale(1.08);
  }
  100% {
    transform: translate3d(32vw, -4vh, 0) scale(0.96);
  }
}

@keyframes tt-drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-16vw, -12vh, 0) scale(1.1);
  }
  100% {
    transform: translate3d(-30vw, 4vh, 0) scale(0.94);
  }
}

@keyframes tt-haze {
  from {
    transform: translate3d(-3%, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(3%, -2%, 0) rotate(4deg);
  }
}

html.tt-transparent .tt-bg {
  display: none;
}

/* --- The arc ------------------------------------------------------------ */

.tt-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tt-card {
  position: absolute;
  left: 50%;
  /* The arc's origin sits below the frame: the apex is --tt-apex down the
     root, and the centre of the circle is one radius below that. */
  top: calc(var(--tt-apex) + var(--tt-r));
  width: var(--tt-card-w);
  height: var(--tt-card-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--tt-radius);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform-origin: 50% 50%;
  /* Width and height ride the same spring as the arc, so a card morphs from
     portrait (side) to landscape (active) as it travels to the centre. */
  transition: transform var(--tt-dur) var(--tt-ease), opacity var(--tt-dur) var(--tt-ease),
    width var(--tt-dur) var(--tt-ease), height var(--tt-dur) var(--tt-ease);
  will-change: transform, width, height;
  outline: none;
}

.tt-arc.is-dragging .tt-card,
.tt-arc.is-instant .tt-card {
  transition: none; /* dragging tracks the pointer 1:1 */
}

.tt-arc.is-dragging .tt-card,
.tt-arc.is-dragging .tt-card * {
  cursor: grabbing;
}

.tt-card__frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Loading / fallback surface — never an empty box. */
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(165deg, #1a1d22 0%, #121418 55%, #0c0e11 100%);
  border: 1px solid var(--tt-line);
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.95);
  transform: translateZ(0); /* keeps the rounded clip on video in Safari */
  transition: box-shadow 600ms ease, border-color 600ms ease;
}

.tt-card.is-active .tt-card__frame {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 70px -20px rgba(255, 255, 255, 0.16);
}

.tt-card__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
  background: transparent;
}

.tt-card__media.is-ready {
  opacity: 1;
}

/* Branded placeholder used only if both video and image fail. */
.tt-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 10%;
  font-family: 'Space Grotesk', Inter, sans-serif;
  text-align: left;
}

.tt-card__placeholder b {
  font-size: clamp(22px, calc(var(--tt-card-w) * 0.2), 72px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
}

.tt-card__placeholder span {
  font-size: clamp(12px, calc(var(--tt-card-w) * 0.06), 20px);
  font-weight: 600;
  color: var(--tt-ink);
}

.tt-card__loader {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: tt-shimmer 1.6s linear infinite;
  pointer-events: none;
}

.tt-card.has-media .tt-card__loader,
.tt-card.is-failed .tt-card__loader {
  display: none;
}

@keyframes tt-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

/* Dims side cards; the active card gets none. */
.tt-card__shade {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 10, 12, 0.4), rgba(8, 10, 12, 0.8));
  opacity: var(--dim, 0);
  pointer-events: none;
}

.tt-card__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  display: block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

.tt-card.is-active .tt-card__tag {
  opacity: 1;
}

.tt-card__live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ffffff;
  vertical-align: 1px;
  animation: tt-pulse 2s ease-out infinite;
}

@keyframes tt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
}

.tt-card:focus-visible .tt-card__frame {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Soft dark overlay behind the copy so it always reads cleanly over the
   lower shoulders of the arc. */
.tt-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--tt-content-top) - 8px);
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse min(46%, 420px) 80% at 50% 40%, rgba(9, 11, 13, 0.92) 45%, rgba(9, 11, 13, 0) 100%),
    linear-gradient(180deg, rgba(8, 10, 12, 0) 55%, rgba(8, 10, 12, 0.85) 100%);
}

html.tt-transparent .tt-fade {
  display: none;
}

/* --- Active solution copy ---------------------------------------------- */

.tt-content {
  position: absolute;
  left: 50%;
  top: var(--tt-content-top);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(100% - 32px), 680px);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.tt-heading {
  width: 100%;
}

.tt-content a,
.tt-content button {
  pointer-events: auto;
}

.tt-number {
  margin: 0 0 8px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-dim);
}

.tt-number__current {
  color: var(--tt-dim);
}

.tt-number__total {
  color: rgba(255, 255, 255, 0.35);
}

.tt-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
}

.tt-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #ffffff;
  overflow-wrap: anywhere;
}

.tt-desc {
  max-width: 520px;
  margin: 10px auto 0;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--tt-muted);
}

.tt-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 18px;
  padding: 0 26px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 12px 34px -16px rgba(255, 255, 255, 0.45);
  transition: transform 320ms var(--tt-ease), box-shadow 320ms ease, background-color 320ms ease;
}

.tt-cta:hover {
  transform: translateY(-2px);
  background: #f1f2f4;
  box-shadow: 0 18px 44px -16px rgba(255, 255, 255, 0.55);
}

.tt-cta__arrow {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transition: transform 320ms var(--tt-ease);
}

.tt-cta:hover .tt-cta__arrow {
  transform: translateX(4px);
}

.tt-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Copy fades in each time the active solution changes. */
.tt-content.is-swapping .tt-number,
.tt-content.is-swapping .tt-title,
.tt-content.is-swapping .tt-desc,
.tt-content.is-swapping .tt-cta {
  animation: tt-in 520ms var(--tt-ease) both;
}

.tt-content.is-swapping .tt-title {
  animation-delay: 30ms;
}

.tt-content.is-swapping .tt-desc {
  animation-delay: 80ms;
}

.tt-content.is-swapping .tt-cta {
  animation-delay: 130ms;
}

@keyframes tt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tt-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.tt-nav:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.tt-nav:active {
  transform: scale(0.94);
}

.tt-nav:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.tt-nav > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Dots --------------------------------------------------------------- */

.tt-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto; /* pinned to the bottom of the fixed-height copy block */
  padding-top: 18px;
}

.tt-dot {
  position: relative;
  width: 14px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 380ms var(--tt-ease);
}

.tt-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
  transition: width 380ms var(--tt-ease), background 380ms ease;
}

.tt-dot:hover::before {
  background: rgba(255, 255, 255, 0.5);
}

.tt-dot.is-on {
  width: 30px;
}

.tt-dot.is-on::before {
  width: 20px;
  background: #ffffff;
}

.tt-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
  border-radius: 8px;
}

/* --- Utilities ---------------------------------------------------------- */

.tt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tt-noscript {
  padding: 24px;
  text-align: center;
  color: var(--tt-muted);
}

.tt-noscript a {
  color: #ffffff;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 600px) {
  .tt-arc {
    --tt-radius: 18px;
  }

  .tt-nav {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  .tt-desc {
    margin-top: 8px;
  }

  .tt-cta {
    min-height: 48px; /* comfortable tap target */
    margin-top: 14px;
  }

  .tt-dots {
    padding-top: 12px;
  }

  .tt-dot {
    width: 13px;
  }

  .tt-dot.is-on {
    width: 26px;
  }

  .tt-dot.is-on::before {
    width: 16px;
  }

  .tt-card__tag {
    left: 8px;
    top: 8px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .tt-dot {
    width: 11px;
  }

  .tt-dot::before {
    width: 5px;
    height: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-card,
  .tt-dot,
  .tt-dot::before,
  .tt-cta,
  .tt-card__media {
    transition-duration: 1ms;
  }

  .tt-content.is-swapping .tt-number,
  .tt-content.is-swapping .tt-title,
  .tt-content.is-swapping .tt-desc,
  .tt-content.is-swapping .tt-cta,
  .tt-card__loader,
  .tt-card__live,
  .tt-bg__light,
  .tt-bg__haze {
    animation: none;
  }
}