/* Non-blocking first-entry brand opening. */
.brand-opening {
  position: fixed;
  z-index: 12000;
  inset: 0;
  overflow: hidden;
  background: var(--mav-black);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
  animation: brand-opening-exit 1150ms linear both;
}

.opening-skip .brand-opening { display: none; }

.brand-opening__hairlines,
.brand-opening__identity {
  position: absolute;
  inset: 0;
}

.brand-opening__hairline {
  position: absolute;
  display: block;
  background: rgba(248, 250, 255, 0.18);
  animation-duration: 1150ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.brand-opening__hairline--horizontal {
  top: 34%;
  left: 0;
  width: 100%;
  height: 1px;
  transform-origin: left center;
  animation-name: brand-opening-line-horizontal;
}

.brand-opening__hairline--vertical {
  top: 0;
  left: 24%;
  width: 1px;
  height: 100%;
  transform-origin: center top;
  animation-name: brand-opening-line-vertical;
}

.brand-opening__crosshair {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(25, 114, 120, 0.72);
  opacity: 0;
  transform: scale(0.72);
  animation: brand-opening-crosshair 1150ms linear both;
}

.brand-opening__crosshair::before,
.brand-opening__crosshair::after {
  content: '';
  position: absolute;
  background: var(--stormy-teal);
}

.brand-opening__crosshair::before {
  top: 50%;
  left: -5px;
  width: 25px;
  height: 1px;
}

.brand-opening__crosshair::after {
  top: -5px;
  left: 50%;
  width: 1px;
  height: 25px;
}

.brand-opening__crosshair--a { top: calc(34% - 8px); left: calc(24% - 8px); }
.brand-opening__crosshair--b { right: 7vw; bottom: 10vh; }

.brand-opening__identity {
  --brand-lockup-width: min(78vw, 760px);
}

.brand-opening__mark-mask,
.brand-opening__lockup-mask {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  clip-path: inset(0 100% 0 0);
}

.brand-opening__mark-mask {
  left: calc(50% - min(19.45vw, 189.5px));
  width: min(30.73vw, 299px);
  transform: translate(-50%, -50%);
  animation: brand-opening-mark 1150ms linear both;
}

.brand-opening__lockup-mask {
  left: 50%;
  width: var(--brand-lockup-width);
  transform: translate(-50%, -50%);
  animation: brand-opening-lockup 1150ms linear both;
}

.brand-opening__mark-mask img,
.brand-opening__lockup-mask img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-opening__sweep {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--stormy-teal);
  transform: translate3d(0, 0, 0) scaleX(0);
  transform-origin: left center;
  animation: brand-opening-sweep 1150ms linear both;
}

@keyframes brand-opening-line-horizontal {
  0%, 13% { transform: scaleX(0); opacity: 0; }
  13% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  39%, 100% { transform: scaleX(1); opacity: 1; }
}

@keyframes brand-opening-line-vertical {
  0%, 17% { transform: scaleY(0); opacity: 0; }
  17% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  41%, 100% { transform: scaleY(1); opacity: 1; }
}

@keyframes brand-opening-crosshair {
  0%, 18% { opacity: 0; transform: scale(0.72); }
  18% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  39%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes brand-opening-mark {
  0%, 26% { clip-path: inset(0 100% 0 0); opacity: 0; }
  26% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  58% { clip-path: inset(0 0% 0 0); opacity: 1; }
  67% { opacity: 1; }
  76%, 100% { clip-path: inset(0 0% 0 0); opacity: 0; }
}

@keyframes brand-opening-lockup {
  0%, 52% { clip-path: inset(0 100% 0 0); opacity: 0; }
  52% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  78%, 100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}

@keyframes brand-opening-sweep {
  0%, 78% { transform: translate3d(0, 0, 0) scaleX(0); }
  78% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  84% { transform: translate3d(0, 0, 0) scaleX(1); }
  100% { transform: translate3d(0, calc(-100vh - 2px), 0) scaleX(1); }
}

@keyframes brand-opening-exit {
  0%, 78% { clip-path: inset(0 0 0% 0); opacity: 1; visibility: visible; }
  78% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  99% { clip-path: inset(0 0 100% 0); opacity: 1; visibility: visible; }
  100% { clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; }
}

/* Lightweight interaction and reduced-motion policy */
.line-mask {
  display: block;
  overflow: hidden;
}

.line-mask > span { display: block; }

.showreel-card video,
.work-project-media img,
.principle-media img {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .showreel-card:hover video,
  .work-project:hover .work-project-media img,
  .principle-card:hover .principle-media img {
    transform: scale(1.018);
  }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Scroll-linked canvas reveals are injected only while enhanced motion is active. */
.canvas-transition-target { isolation: isolate; }

.canvas-transition-target > :not(.canvas-transition) {
  position: relative;
  z-index: 1;
}

.canvas-transition-target > .proximity-crosshair-field {
  position: absolute;
  z-index: 3;
}

.canvas-transition {
  --canvas-from: var(--mav-white);
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: min(52vh, 480px);
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  background-color: var(--canvas-from);
}

.canvas-transition--from-dark { --canvas-from: var(--mav-black); }
.canvas-transition--from-light { --canvas-from: var(--mav-white); }

.canvas-transition__panel {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
}

.canvas-transition--origami .canvas-transition__panel {
  left: -20%;
  width: 160%;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.canvas-transition.is-active .canvas-transition__panel,
.canvas-transition.is-active .canvas-transition__registration {
  will-change: transform, clip-path, opacity;
}

.canvas-transition__registration {
  position: absolute;
  z-index: 1;
  top: 1.25rem;
  right: 1.25rem;
  width: 18px;
  height: 18px;
  border: 1px solid var(--stormy-teal);
}

.canvas-transition__registration::before,
.canvas-transition__registration::after {
  content: '';
  position: absolute;
  background-color: var(--stormy-teal);
}

.canvas-transition__registration::before { top: 50%; left: -5px; width: 26px; height: 1px; }
.canvas-transition__registration::after { top: -5px; left: 50%; width: 1px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .brand-opening__hairlines,
  .brand-opening__mark-mask,
  .brand-opening__sweep {
    display: none !important;
  }

  .brand-opening__lockup-mask {
    clip-path: none !important;
    opacity: 1 !important;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .custom-cursor,
  .canvas-transition,
  .pov-noise-cloud,
  .substance-noise,
  .hero-calibration {
    display: none !important;
  }

  .process-stage {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .pov-headline,
  .pov-reveal,
  .why-headline,
  .why-follow,
  .philosophy-statement,
  .wordmark-text,
  .footer-lockup-brackets .bracket {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }
}