/*
 * Touristar motion layer
 * Editorial movement only: the experience remains complete when this file is
 * unavailable or when the visitor requests reduced motion.
 */

:root {
  --motion-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes editorial-rise {
  from { opacity: 0; transform: translate3d(0, 1.35rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes editorial-rise-small {
  from { opacity: 0; transform: translate3d(0, 0.7rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes editorial-reveal-left {
  from { opacity: 0; transform: translate3d(-1.35rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes editorial-reveal-right {
  from { opacity: 0; transform: translate3d(1.35rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes editorial-scale {
  from { opacity: 0; transform: scale(0.965); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-media-settle {
  from { opacity: 0.28; transform: scale(1.065); }
  to { opacity: 0.73; transform: scale(1); }
}

@keyframes media-settle {
  from { opacity: 0.42; transform: scale(1.055); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ambient-orbit-one {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-1rem, 1.15rem, 0) rotate(6deg); }
}

@keyframes ambient-orbit-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.55) rotate(0deg); }
  50% { transform: translate3d(1.25rem, -0.85rem, 0) scale(1.55) rotate(-4deg); }
}

@keyframes ambient-grid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 5rem 5rem, 5rem 5rem; }
}

@keyframes subtle-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -0.35rem, 0); }
}

@keyframes status-breathe {
  0%, 100% { opacity: 0.72; box-shadow: 0 0 0 0 rgba(73, 215, 207, 0.28); }
  50% { opacity: 1; box-shadow: 0 0 0 0.32rem rgba(73, 215, 207, 0); }
}

@keyframes welcome-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 4rem 4rem, 4rem 4rem; }
}

@keyframes form-error-in {
  0% { opacity: 0; transform: translate3d(0, -0.35rem, 0); }
  55% { transform: translate3d(0, 0.12rem, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Shared controls */

.button .icon,
.portal-pill .icon,
.partner-invite a .icon,
.contact-action .icon {
  transition: transform 320ms var(--motion-out);
}

.button:active,
.player-button:active,
.icon-button:active,
.gallery-close:active,
.gallery-arrow:active {
  transform: translateY(0) scale(0.97);
}

.pin-visibility,
.portal-foot-actions > a,
.portal-foot-actions button,
.contact-action,
.gallery-close,
.gallery-arrow {
  transition:
    color 240ms ease,
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 320ms var(--motion-out),
    transform 320ms var(--motion-out);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .icon,
  .portal-pill:hover .icon,
  .partner-invite a:hover .icon,
  .contact-action:hover .icon {
    transform: translateX(0.22rem);
  }

  .language-pill:hover,
  .portal-pill:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.9rem 2rem rgba(3, 18, 20, 0.18);
  }
}

/* Public microsite */

.page-home .public-header .brand-link,
.page-home .public-actions > * {
  animation: editorial-rise-small 720ms var(--motion-out) both;
}

.page-home .public-actions > :nth-child(1) { animation-delay: 90ms; }
.page-home .public-actions > :nth-child(2) { animation-delay: 150ms; }

.page-home .home-video {
  will-change: transform, opacity;
  animation: hero-media-settle 1800ms var(--motion-out) both;
}

.page-home .home-hero::after {
  animation: ambient-grid 28s linear infinite;
}

.page-home .home-orbit-one {
  animation: ambient-orbit-one 18s ease-in-out infinite;
}

.page-home .home-orbit-two {
  animation: ambient-orbit-two 22s ease-in-out -6s infinite;
}

.page-home .home-hero-content > *,
.page-home .hero-metric,
.page-home .scroll-cue {
  animation: editorial-rise 880ms var(--motion-out) both;
}

.page-home .home-hero-content > :nth-child(1) { animation-delay: 160ms; }
.page-home .home-hero-content > :nth-child(2) { animation-delay: 230ms; }
.page-home .home-hero-content > :nth-child(3) { animation-delay: 340ms; }
.page-home .home-hero-content > :nth-child(4) { animation-delay: 440ms; }
.page-home .hero-metric:nth-child(1) { animation-delay: 530ms; }
.page-home .hero-metric:nth-child(2) { animation-delay: 600ms; }
.page-home .hero-metric:nth-child(3) { animation-delay: 670ms; }
.page-home .scroll-cue { animation-delay: 720ms; }

.public-header.is-condensed .brand-link img {
  transform: scale(0.94);
  transform-origin: left center;
}

.brand-link img,
.public-header .language-pill,
.public-header .portal-pill {
  transition:
    transform 320ms var(--motion-out),
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 320ms var(--motion-out);
}

.story-copy blockquote {
  transition: border-color 280ms ease, transform 380ms var(--motion-out);
}

.map-card-back {
  transition: transform 650ms var(--motion-out), box-shadow 650ms var(--motion-out);
}

.map-card-front {
  transition: transform 650ms var(--motion-out), box-shadow 650ms var(--motion-out);
}

.partner-invite {
  transition: transform 420ms var(--motion-out), box-shadow 420ms var(--motion-out);
}

@media (hover: hover) and (pointer: fine) {
  .story-copy blockquote:hover {
    border-left-color: var(--aqua);
    transform: translateX(0.3rem);
  }

  .story-visual:hover .map-card-back {
    transform: rotate(-10deg) translate3d(-0.4rem, 0.3rem, 0);
    box-shadow: 0 38px 90px rgba(7, 23, 25, 0.17);
  }

  .story-visual:hover .map-card-front {
    transform: rotate(1deg) translate3d(0.2rem, -0.8rem, 0);
    box-shadow: 0 42px 100px rgba(7, 23, 25, 0.2);
  }

  .partner-invite:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1.8rem 4rem rgba(7, 23, 25, 0.12);
  }
}

/* Login */

.page-login .login-photo {
  animation: media-settle 1800ms var(--motion-out) both;
}

.page-login .login-brand-row,
.page-login .login-message > *,
.page-login .login-kit-badge,
.page-login .login-panel-inner > *,
.page-login .login-panel-inner form > *,
.page-login .login-copyright {
  animation: editorial-rise 780ms var(--motion-out) both;
}

.page-login .login-brand-row { animation-delay: 80ms; }
.page-login .login-message > :nth-child(1) { animation-delay: 180ms; }
.page-login .login-message > :nth-child(2) { animation-delay: 260ms; }
.page-login .login-message > :nth-child(3) { animation-delay: 350ms; }
.page-login .login-kit-badge { animation-delay: 500ms; }
.page-login .login-panel-inner > :nth-child(1) { animation-delay: 140ms; }
.page-login .login-panel-inner > :nth-child(2) { animation-delay: 200ms; }
.page-login .login-panel-inner > :nth-child(3) { animation-delay: 260ms; }
.page-login .login-panel-inner > :nth-child(4) { animation-delay: 320ms; }
.page-login .login-panel-inner > :nth-child(5) { animation-delay: 380ms; }
.page-login .login-panel-inner > :nth-child(6) { animation-delay: 440ms; }
.page-login .login-panel-inner form > :nth-child(1) { animation-delay: 400ms; }
.page-login .login-panel-inner form > :nth-child(2) { animation-delay: 430ms; }
.page-login .login-panel-inner form > :nth-child(3) { animation-delay: 460ms; }
.page-login .login-panel-inner form > :nth-child(4) { animation-delay: 490ms; }
.page-login .login-panel-inner form > :nth-child(5) { animation-delay: 520ms; }
.page-login .login-copyright { animation-delay: 560ms; }

.page-login .form-error:not(.is-hidden) {
  animation-name: form-error-in;
  animation-duration: 420ms;
}

.pin-field::after {
  content: "";
  position: absolute;
  right: 4rem;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--motion-out);
}

.pin-field:focus-within::after {
  transform: scaleX(1);
}

.login-lock {
  transition: transform 420ms var(--motion-spring), box-shadow 420ms var(--motion-out);
}

.login-panel-inner:focus-within .login-lock {
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 0.75rem 2rem rgba(73, 215, 207, 0.22);
}

/* Portal shell and personalized welcome */

.page-portal .portal-sidebar {
  animation: editorial-reveal-left 620ms var(--motion-out) both;
}

.page-portal .portal-sidebar-head > *,
.page-portal .portal-nav-link,
.page-portal .portal-sidebar-foot {
  animation: editorial-rise-small 560ms var(--motion-out) both;
}

.page-portal .portal-sidebar-head > :nth-child(1) { animation-delay: 100ms; }
.page-portal .portal-sidebar-head > :nth-child(2) { animation-delay: 130ms; }
.page-portal .portal-sidebar-head > :nth-child(3) { animation-delay: 160ms; }
.page-portal .portal-sidebar-head > :nth-child(4) { animation-delay: 200ms; }
.page-portal .portal-nav-link:nth-child(1) { animation-delay: 200ms; }
.page-portal .portal-nav-link:nth-child(2) { animation-delay: 245ms; }
.page-portal .portal-nav-link:nth-child(3) { animation-delay: 290ms; }
.page-portal .portal-nav-link:nth-child(4) { animation-delay: 335ms; }
.page-portal .portal-nav-link:nth-child(5) { animation-delay: 380ms; }
.page-portal .portal-sidebar-foot { animation-delay: 420ms; }

.portal-nav-icon {
  transition: color 240ms ease, background-color 240ms ease, transform 360ms var(--motion-spring);
}

.portal-nav-link.is-active::before {
  animation: status-breathe 2.8s ease-in-out infinite;
}

.private-state i {
  animation: status-breathe 2.8s ease-in-out infinite;
}

.portal-foot-actions > a:hover,
.portal-foot-actions button:hover {
  transform: translateY(-0.12rem);
}

@media (hover: hover) and (pointer: fine) {
  .portal-nav-link:hover .portal-nav-icon {
    transform: scale(1.06) rotate(-2deg);
  }
}

.portal-backdrop:not([hidden]) {
  animation: editorial-scale 260ms ease both;
}

.partner-welcome-media img {
  animation: media-settle 1800ms var(--motion-out) both;
}

.partner-welcome-grid {
  animation: welcome-grid-drift 30s linear infinite;
}

.partner-welcome-content > * {
  animation: editorial-rise 820ms var(--motion-out) both;
}

.partner-welcome-content > :nth-child(1) { animation-delay: 140ms; }
.partner-welcome-content > :nth-child(2) { animation-delay: 220ms; }
.partner-welcome-content > :nth-child(3) { animation-delay: 310ms; }
.partner-welcome-content > :nth-child(4) { animation-delay: 410ms; }
.partner-welcome-content > :nth-child(5) { animation-delay: 520ms; }

/* New portal content enters after every Turbo frame navigation. Presentation
   owns its own scene transitions, so this layer leaves them untouched. */

.portal-section:not(.presentation-section) > .section-heading,
.portal-section:not(.presentation-section) > .brand-hero,
.portal-section:not(.presentation-section) > .kit-hero,
.portal-section:not(.presentation-section) > .metric-grid,
.portal-section:not(.presentation-section) > .audience-block,
.portal-section:not(.presentation-section) > .distribution-block,
.portal-section:not(.presentation-section) > .formats-block,
.portal-section:not(.presentation-section) > .map-overview,
.portal-section:not(.presentation-section) > .measure-specs,
.portal-section:not(.presentation-section) > .production-rules,
.portal-section:not(.presentation-section) > .mockup-grid,
.portal-section:not(.presentation-section) > .principles-grid,
.portal-section:not(.presentation-section) > .contact-block {
  animation: editorial-rise 680ms var(--motion-out) both;
}

.portal-section:not(.presentation-section) > :nth-child(1) { animation-delay: 30ms; }
.portal-section:not(.presentation-section) > :nth-child(2) { animation-delay: 100ms; }
.portal-section:not(.presentation-section) > :nth-child(3) { animation-delay: 170ms; }
.portal-section:not(.presentation-section) > :nth-child(4) { animation-delay: 240ms; }
.portal-section:not(.presentation-section) > :nth-child(5) { animation-delay: 310ms; }

.metric-grid article,
.journey-grid article,
.formats-grid article,
.measure-card,
.mockup-card,
.principles-grid article,
.contact-person {
  transition:
    transform 420ms var(--motion-out),
    border-color 320ms ease,
    background-color 320ms ease,
    box-shadow 420ms var(--motion-out);
}

.measure-image img,
.kit-hero > img {
  transition: transform 900ms var(--motion-out), filter 500ms ease;
}

.format-shape {
  transition: transform 520ms var(--motion-spring), box-shadow 420ms var(--motion-out);
}

.mockup-card-copy,
.mockup-card-number {
  transition: transform 420ms var(--motion-out), opacity 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .metric-grid article:hover,
  .journey-grid article:hover,
  .formats-grid article:hover,
  .measure-card:hover,
  .principles-grid article:hover {
    z-index: 2;
    transform: translateY(-0.28rem);
    border-color: rgba(73, 215, 207, 0.35);
    box-shadow: 0 1.5rem 3.5rem rgba(7, 23, 25, 0.1);
  }

  .formats-grid article:hover .format-shape {
    transform: translate3d(0, -0.3rem, 0) rotate(-2deg);
  }

  .measure-card:hover .measure-image img,
  .kit-hero:hover > img {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.01);
  }

  .mockup-card:hover {
    transform: translateY(-0.28rem);
    box-shadow: 0 1.8rem 4rem rgba(7, 23, 25, 0.18);
  }

  .mockup-card:hover .mockup-card-copy {
    transform: translate3d(0, -0.2rem, 0);
  }

  .mockup-card:hover .mockup-card-number {
    transform: translate3d(0.15rem, -0.15rem, 0);
  }

  .contact-person:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 1.7rem 4rem rgba(7, 23, 25, 0.12);
  }

  .contact-action:hover {
    transform: translateY(-0.12rem);
  }
}

.gallery-overlay:not([hidden]) {
  animation: editorial-scale 300ms var(--motion-out) both;
}

.gallery-overlay:not([hidden]) figure {
  animation: editorial-rise 480ms var(--motion-out) 80ms both;
}

/* Where supported, the second half of the public page reveals as it enters the
   viewport. Browsers without view timelines simply retain the static layout. */

@supports (animation-timeline: view()) {
  .page-home .story-copy > *,
  .page-home .story-visual,
  .page-home .partner-invite {
    animation-name: editorial-rise;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view(block);
    animation-range: entry 7% cover 31%;
  }

  .page-home .story-visual {
    animation-name: editorial-reveal-right;
    animation-range: entry 4% cover 34%;
  }

  .page-home .story-copy > :nth-child(2) { animation-range: entry 10% cover 33%; }
  .page-home .story-copy > :nth-child(3) { animation-range: entry 14% cover 36%; }
  .page-home .story-copy > :nth-child(4) { animation-range: entry 18% cover 39%; }
  .page-home .partner-invite { animation-range: entry 10% cover 30%; }
}

@media (max-width: 900px) {
  .page-portal .portal-sidebar {
    /* Mobile opening/closing is governed by the existing sidebar transform. */
    animation: none;
  }

  .portal-mobile-head {
    animation: editorial-rise-small 560ms var(--motion-out) both;
  }
}

@media (max-width: 680px) {
  .page-home .home-hero-content > *,
  .page-home .hero-metric,
  .page-home .scroll-cue,
  .page-login .login-message > *,
  .page-login .login-panel-inner > * {
    animation-duration: 680ms;
  }

  .page-home .home-orbit-one {
    animation-duration: 22s;
  }

  .page-home .home-orbit-two {
    animation-duration: 27s;
  }
}

/* Respect the operating-system preference comprehensively. Content remains in
   its final, usable state and controls still communicate instantaneous state. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .home-video,
  .login-photo,
  .partner-welcome-media img,
  .map-card-back,
  .map-card-front,
  .portal-sidebar,
  .portal-section,
  .portal-section > *,
  .portal-section article,
  .partner-welcome-content > * {
    opacity: 1 !important;
  }
}