/* ═══════════════════════════════════════════════════════════════════════
   SEE MOTION SYSTEM  ·  v1.0  (2026-06-12)
   --------------------------------------------------------------------
   Site-wide scroll reveals + elevator floor indicator (homepage only).
   Performance budget:
     · GPU-only props (transform / opacity)
     · prefers-reduced-motion kills every transition
     · No layout shift (reveals fade from opacity:0 → 1, no display change)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Scroll reveals ─────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="fade"]         { transform: none; }
[data-reveal="up"]           { transform: translate3d(0, 32px, 0); }
[data-reveal="down"]         { transform: translate3d(0, -24px, 0); }
[data-reveal="left"]         { transform: translate3d(32px, 0, 0); }
[data-reveal="right"]        { transform: translate3d(-32px, 0, 0); }
[data-reveal="zoom"]         { transform: scale(.94); }
[data-reveal="rise"]         { transform: translate3d(0, 48px, 0); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Stagger helper — set --reveal-delay inline or via :nth-child */
[data-reveal-group] > [data-reveal]:nth-child(1)  { --reveal-delay:  40ms; }
[data-reveal-group] > [data-reveal]:nth-child(2)  { --reveal-delay: 120ms; }
[data-reveal-group] > [data-reveal]:nth-child(3)  { --reveal-delay: 200ms; }
[data-reveal-group] > [data-reveal]:nth-child(4)  { --reveal-delay: 280ms; }
[data-reveal-group] > [data-reveal]:nth-child(5)  { --reveal-delay: 360ms; }
[data-reveal-group] > [data-reveal]:nth-child(6)  { --reveal-delay: 440ms; }
[data-reveal-group] > [data-reveal]:nth-child(7)  { --reveal-delay: 520ms; }
[data-reveal-group] > [data-reveal]:nth-child(8)  { --reveal-delay: 600ms; }

/* ── 2. Hover micro-lifts (auto-applied to cards/buttons) ─────────── */

.see-range__card,
.see-family__chip,
.see-industries__card,
.see-numbers__col,
.see-atlas-teaser__card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
@media (hover: hover) {
  .see-range__card:hover,
  .see-industries__card:hover,
  .see-atlas-teaser__card:hover {
    transform: translate3d(0, -4px, 0);
  }
  .see-family__chip:hover {
    transform: translate3d(0, -2px, 0);
  }
}

/* ── 3. Elevator floor indicator ──────────────────────────────────── */
/* Fixed sidebar on right, only renders when .see-floors element exists. */

.see-floors {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;                 /* below header (100+) and any modal */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;        /* shaft is decorative; only floor dots clickable */
  opacity: 0;
  transition: opacity .6s ease;
}
.see-floors.is-ready { opacity: 1; }

/* The shaft (vertical rail) */
.see-floors__shaft {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, .08),
    rgba(20, 20, 20, .22) 40%,
    rgba(20, 20, 20, .22) 60%,
    rgba(20, 20, 20, .08)
  );
  border-radius: 2px;
  pointer-events: none;
}

/* The travelling cabin (red square that rides the shaft) */
.see-floors__cabin {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #CC1B1B;
  border-radius: 2px;
  box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(204, 27, 27, .45);
  transform: translate3d(0, 0, 0);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

/* Floor dots — one per homepage section */
.see-floors__floor {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: 600 10px/1 system-ui, -apple-system, sans-serif;
  color: #6b6b6b;
  z-index: 2;
}
.see-floors__floor::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: #fff;
  border: 1.5px solid #bcbcbc;
  border-radius: 50%;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  z-index: -1;
}
.see-floors__floor:hover::before {
  border-color: #CC1B1B;
  transform: scale(1.18);
}
.see-floors__floor.is-active {
  color: #CC1B1B;
}
.see-floors__floor.is-active::before {
  border-color: #CC1B1B;
  background: #CC1B1B;
}
.see-floors__num {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #1C1C1C;
  color: #fff;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.see-floors__num::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #1C1C1C;
}
.see-floors__floor:hover .see-floors__num,
.see-floors__floor:focus-visible .see-floors__num {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hide on small screens — too cramped, would compete with floating CTA bar */
@media (max-width: 1024px) {
  .see-floors { display: none; }
}

/* ── 4. Elevator door page transition ─────────────────────────────── */
/* Two panels meet at center on link click, then open on the new page. */

.see-doors {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  visibility: hidden;
}
.see-doors.is-active {
  visibility: visible;
  pointer-events: auto;
}
.see-doors__panel {
  flex: 1 1 50%;
  background: #0a0a0a;
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(.86, 0, .07, 1);
  will-change: transform;
}
/* Subtle metallic brushed-steel gradient on the inner edge */
.see-doors__panel--left {
  background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 92%, #2a2a2a 100%);
  transform: translate3d(-100%, 0, 0);
}
.see-doors__panel--right {
  background: linear-gradient(270deg, #0a0a0a 0%, #1a1a1a 92%, #2a2a2a 100%);
  transform: translate3d(100%, 0, 0);
}

/* CLOSED state (panels meet at the center, covering the page) */
.see-doors.is-closed .see-doors__panel--left  { transform: translate3d(0, 0, 0); }
.see-doors.is-closed .see-doors__panel--right { transform: translate3d(0, 0, 0); }

/* Brand mark in the seam */
.see-doors__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .55s cubic-bezier(.86, 0, .07, 1);
  z-index: 2;
}
.see-doors.is-closed .see-doors__brand {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.see-doors__brand::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #CC1B1B;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 8px 32px rgba(204,27,27,.35);
  animation: see-doors-pulse 1.2s ease-in-out infinite;
}
@keyframes see-doors-pulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(.82); opacity: .55; }
}

/* INSTANT-CLOSED state (page just loaded after a transition).
   No transition on initial paint — then we add .is-opening to slide them out. */
.see-doors.is-instant-closed .see-doors__panel--left,
.see-doors.is-instant-closed .see-doors__panel--right {
  transition: none;
}
.see-doors.is-instant-closed .see-doors__panel--left  { transform: translate3d(0, 0, 0); }
.see-doors.is-instant-closed .see-doors__panel--right { transform: translate3d(0, 0, 0); }

/* ENTRY GUARD — set on <html> by the inline head script BEFORE first paint.
   Locks the doors in the closed position with NO transition, so the very
   first frame of the new page already shows doors closed (no white flash
   between page-A close and page-B open). motion.js then removes this class
   on the next animation frame, which lets the panels animate out via their
   default 0.45s transition. */
html.see-doors-entry .see-doors {
  visibility: visible;
  pointer-events: auto;
}
html.see-doors-entry .see-doors__panel {
  transition: none;
}
html.see-doors-entry .see-doors__panel--left  { transform: translate3d(0, 0, 0); }
html.see-doors-entry .see-doors__panel--right { transform: translate3d(0, 0, 0); }
html.see-doors-entry .see-doors__brand {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: none;
}

/* ── 5. Magnetic CTA buttons ───────────────────────────────────────── */
/* Buttons follow the cursor slightly when it's near them.            */
/* JS sets CSS vars --mx / --my; CSS does the transform.              */

.see-magnetic {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  will-change: transform;
}

/* ── 6. Reduced-motion killswitch ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .see-floors__cabin,
  .see-doors__panel,
  .see-magnetic {
    transition: none !important;
  }
  .see-magnetic {
    transform: none !important;
  }
  .see-doors { display: none !important; }
  .see-range__card,
  .see-family__chip,
  .see-industries__card,
  .see-numbers__col,
  .see-atlas-teaser__card {
    transition: none !important;
  }
  @media (hover: hover) {
    .see-range__card:hover,
    .see-industries__card:hover,
    .see-atlas-teaser__card:hover,
    .see-family__chip:hover {
      transform: none !important;
    }
  }
}

/* ── 7. Animated eyebrow accent ───────────────────────────────────── */
/* Each homepage section has an "eyebrow" label (small uppercase text   */
/* above the headline). Draw a thin red underline that animates in as   */
/* the section reveals — subtle ornament between sections, no extra     */
/* markup needed.                                                        */

.see-numbers__ey,
.see-family__ey,
.see-industries__ey,
.see-atlas-teaser__ey,
.see-range__h {
  position: relative;
  display: inline-block;
}
.see-numbers__ey::after,
.see-family__ey::after,
.see-industries__ey::after,
.see-atlas-teaser__ey::after,
.see-range__h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 48px;
  background: #CC1B1B;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1) .2s;
}
/* Trigger when the parent reveal fires. Walk up to the closest reveal
   ancestor — covers both [data-reveal] on header and on copy-col. */
[data-reveal].is-revealed .see-numbers__ey::after,
[data-reveal].is-revealed .see-family__ey::after,
[data-reveal].is-revealed .see-industries__ey::after,
[data-reveal].is-revealed .see-atlas-teaser__ey::after,
[data-reveal].is-revealed .see-range__h::after,
.see-numbers__head.is-revealed .see-numbers__ey::after,
.see-family__copy-col.is-revealed .see-family__ey::after,
.see-industries__head.is-revealed .see-industries__ey::after,
.see-atlas-teaser__info-col.is-revealed .see-atlas-teaser__ey::after,
.see-range__head.is-revealed .see-range__h::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .see-numbers__ey::after,
  .see-family__ey::after,
  .see-industries__ey::after,
  .see-atlas-teaser__ey::after,
  .see-range__h::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ── 7.5  Hero → Numbers shaft-door reveal ────────────────────────── */
/* Two metal panels cover the Numbers section initially. As the section */
/* enters viewport, they slide outward (left/right) like elevator doors  */
/* opening — revealing the three big numbers behind. One-shot anim.     */

[data-shaft-doors] {
  position: relative;
  overflow: hidden;
}
.see-shaft-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;          /* tiny overlap so seam is invisible */
  z-index: 4;
  pointer-events: none;
  will-change: transform;
  transition: transform 1.4s cubic-bezier(.76, 0, .24, 1);
}
.see-shaft-door--left {
  left: 0;
  background:
    linear-gradient(90deg,
      #0a0a0a 0%,
      #161616 60%,
      #242424 92%,
      #303030 100%);
  transform: translate3d(0, 0, 0);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
.see-shaft-door--right {
  left: 49%;
  background:
    linear-gradient(270deg,
      #0a0a0a 0%,
      #161616 60%,
      #242424 92%,
      #303030 100%);
  transform: translate3d(0, 0, 0);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.04);
}
/* Subtle brushed-metal scratches */
.see-shaft-door::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.015) 3px,
      rgba(255,255,255,.015) 4px
    );
  opacity: .6;
}
/* A thin red seam where the two panels meet (echoes the brand) */
.see-shaft-door--right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #CC1B1B;
  box-shadow: 0 0 12px rgba(204, 27, 27, .5);
  opacity: .9;
  transition: opacity .35s ease;
}
/* OPEN state — set when section enters viewport (JS adds .is-open) */
[data-shaft-doors].is-open .see-shaft-door--left  { transform: translate3d(-101%, 0, 0); }
[data-shaft-doors].is-open .see-shaft-door--right { transform: translate3d( 101%, 0, 0); }
[data-shaft-doors].is-open .see-shaft-door--right::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .see-shaft-door {
    transition: none !important;
    transform: translate3d(-200%, 0, 0) !important;  /* off-screen, no anim */
  }
  .see-shaft-door--right {
    transform: translate3d( 200%, 0, 0) !important;
  }
}

/* ── 8. Scroll-progress bar (sitewide, top of viewport) ───────────── */

.see-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9998;       /* just under .see-doors (9999) so doors cover it */
  pointer-events: none;
  background: transparent;
}
.see-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #CC1B1B, #ff4444);
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(204, 27, 27, .35);
  transition: width .12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .see-progress__bar { transition: none !important; }
}

/* ── 9. 3D tilt on home-range product cards ───────────────────────── */
/* The .see-range__row gets a perspective so its children can rotate.   */
/* Cards rotate via CSS vars (--rx, --ry) set by motion.js on mousemove.*/

.see-range__row {
  perspective: 1200px;
  perspective-origin: 50% 60%;
}
.see-range__card {
  transform-style: preserve-3d;
  /* Override the home.css hover translateY — we control everything now. */
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.see-range__card.see-tilt {
  transform:
    perspective(1200px)
    rotateY(var(--ry, 0deg))
    rotateX(var(--rx, 0deg))
    translate3d(0, var(--ty, 0px), 0);
}
.see-range__card.see-tilt.is-hovering {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35);
}
/* Inner depth — title and image lift slightly forward on hover */
.see-range__card.see-tilt .see-range__card-title,
.see-range__card.see-tilt .see-range__card-img {
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.see-range__card.see-tilt.is-hovering .see-range__card-title {
  transform: translateZ(14px);
}
.see-range__card.see-tilt.is-hovering .see-range__card-img {
  transform: translateZ(8px);
}

/* Mobile / touch — disable tilt entirely; cards stay flat with the
   existing translateY hover from home.css (which is hover:hover so
   touch already gets neutral). */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .see-range__card.see-tilt,
  .see-range__card.see-tilt.is-hovering {
    transform: none !important;
  }
  .see-range__card.see-tilt .see-range__card-title,
  .see-range__card.see-tilt .see-range__card-img {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .see-range__card.see-tilt,
  .see-range__card.see-tilt.is-hovering {
    transform: none !important;
    transition: none !important;
  }
}

/* ── 10. Industries — animated SVG icons ──────────────────────────── */

.see-industries__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: #CC1B1B;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease .15s, transform .5s cubic-bezier(.16, 1, .3, 1) .15s;
}
.see-industries__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* On reveal — icon fades in. On hover — sector-specific micro-animation. */
.see-industries__cell.is-revealed .see-industries__icon,
[data-reveal-group].is-revealed .see-industries__cell .see-industries__icon,
.see-industries__grid.is-revealed .see-industries__icon {
  opacity: 1;
  transform: translateY(0);
}
/* Fallback — once the cell is in any revealed parent, show */
[data-reveal].is-revealed.see-industries__cell .see-industries__icon {
  opacity: 1;
  transform: translateY(0);
}

/* Path stroke draw-in for "linear" icons (residential, healthcare etc) */
.see-industries__icon svg path,
.see-industries__icon svg circle,
.see-industries__icon svg rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* Hover micro-animations per sector */
@media (hover: hover) {
  /* Residential — door slides open (translateY) */
  .see-industries__cell--residential:hover .ii-door {
    animation: ii-door-open .6s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  @keyframes ii-door-open {
    0%   { transform: translateY(0);    opacity: 1; }
    60%  { transform: translateY(2px);  opacity: 1; }
    100% { transform: translateY(4px);  opacity: .15; }
  }

  /* Healthcare — pulse line glides left-to-right */
  .see-industries__cell--healthcare .ii-pulse {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
  }
  .see-industries__cell--healthcare:hover .ii-pulse {
    animation: ii-pulse-draw 1.1s cubic-bezier(.45, 0, .55, 1) infinite;
  }
  @keyframes ii-pulse-draw {
    0%   { stroke-dashoffset: 50;  }
    50%  { stroke-dashoffset: 0;   }
    100% { stroke-dashoffset: -50; }
  }

  /* Hospitality — bell rings (small left-right wobble of the stem) */
  .see-industries__cell--hospitality:hover .ii-stem,
  .see-industries__cell--hospitality:hover .ii-button {
    transform-origin: 14px 6px;
    animation: ii-bell-ring .6s ease-in-out infinite;
  }
  @keyframes ii-bell-ring {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-10deg); }
    75%      { transform: rotate(10deg); }
  }

  /* Industrial — gear rotates */
  .see-industries__cell--industrial:hover .ii-gear {
    animation: ii-gear-rotate 1.8s linear infinite;
  }
  @keyframes ii-gear-rotate {
    from { transform: rotate(0deg);  }
    to   { transform: rotate(360deg); }
  }

  /* Logistics — box lifts up */
  .see-industries__cell--logistics:hover .ii-box {
    animation: ii-box-lift 1s ease-in-out infinite;
  }
  @keyframes ii-box-lift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  /* Education — cap tassel sways */
  .see-industries__cell--education:hover .ii-tassel {
    transform-origin: 24px 12px;
    animation: ii-tassel-sway 1.2s ease-in-out infinite;
  }
  @keyframes ii-tassel-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(8deg); }
  }

  /* Pharma — capsule splits apart slightly */
  .see-industries__cell--pharma:hover .ii-cap {
    animation: ii-capsule-split 1.2s ease-in-out infinite;
  }
  @keyframes ii-capsule-split {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(1.05); transform-origin: center; }
  }

  /* Government — columns pulse glow */
  .see-industries__cell--government:hover .ii-col1,
  .see-industries__cell--government:hover .ii-col2,
  .see-industries__cell--government:hover .ii-col3 {
    animation: ii-col-glow 1.5s ease-in-out infinite;
  }
  .see-industries__cell--government:hover .ii-col2 { animation-delay: .15s; }
  .see-industries__cell--government:hover .ii-col3 { animation-delay: .3s;  }
  @keyframes ii-col-glow {
    0%, 100% { opacity: 1;   }
    50%      { opacity: .35; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .see-industries__icon {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .see-industries__icon * { animation: none !important; }
}

/* Adjust cell padding so icon doesn't crowd the name */
.see-industries__cell { padding-top: 24px; }

/* ── 11. Hero parallax ─────────────────────────────────────────────── */
/* JS sets --hero-shift; CSS applies the transform.                    */
/* Note: hero is height:100vh, so only meaningful while hero is in view. */

#see-hero-text {
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #see-hero-text { transform: none !important; }
}