/* Curation Creative Studio - Version 1: The Cinematic Lens */
/* Animation Timeline: 1.4s total */
/* Header wipe L→R, Video inset-to-bleed + optical focus, Text optical focus */

/* Font declarations - web font formats for optimal loading */
@font-face {
  font-family: "Gotham Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Gotham-Medium.woff2") format("woff2"),
    url("../fonts/Gotham-Medium.woff") format("woff"),
    url("../fonts/Gotham-Medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "TradeGothic LT";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/TradeGothicLT.woff2") format("woff2"),
    url("../fonts/TradeGothicLT.woff") format("woff"),
    url("../fonts/TradeGothicLT.ttf") format("truetype");
  font-display: swap;
}

/* Custom properties for animation */
:root {
  --ease-build: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-build-slow: cubic-bezier(0.4, 0, 0.1, 1);
  --anim-header: 0.6s;
  --anim-video: 1.4s;
  --anim-text: 1.2s;
  --delay-header: 0s;
  --delay-video: 0.2s;
  --delay-text: 1s;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Viewport container - top aligned, horizontally centred */
html,
body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #ffffff;
}

/* Page container - maintains aspect ratio, fits within viewport */
.page {
  position: relative;
  aspect-ratio: 1200 / 1020;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: 100vh;
  background-color: #ffffff;
}

/* When width is the limiting factor */
@media (max-aspect-ratio: 1200/1020) {
  .page {
    width: 100vw;
    height: auto;
  }
}

/* ========================================
   ANIMATION INITIAL STATES
   ======================================== */

/* Top icons - staggered roll-in from left */
.top-icons .icon {
  opacity: 0;
  filter: blur(4px);
  transform: translateX(-20px) rotate(-180deg);
  will-change: opacity, filter, transform;
}

/* Logo - wipe reveal from left */
.logo-container {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/* Video - inset + blur + scale */
.video-container {
  clip-path: inset(8% 8% 8% 8%);
  filter: blur(4px);
  transform: scale(0.92);
  will-change: clip-path, filter, transform;
}

/* Wordmark strip - fade + slight blur */
.wordmark-strip {
  opacity: 0;
  filter: blur(2px);
  will-change: opacity, filter;
}

/* Bottom panels - optical focus + Y-offset */
.panel-left,
.panel-middle,
.panel-right {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(12px);
  will-change: opacity, filter, transform;
}

/* Video overlay - initially visible */
.video-overlay {
  opacity: 1;
  transform: scale(1);
  will-change: opacity, transform;
  transition: opacity 0.6s var(--ease-build), transform 0.6s var(--ease-build);
}

/* Video overlay hidden state - fades + zooms in to match video feel */
.video-overlay.is-hidden {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

/* ========================================
   VIDEO OVERLAY LAYOUT
   ======================================== */

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  text-align: left;
  cursor: pointer;
  padding: 3vmin 2.8vmin;
  z-index: 10;
  background: black;
}

.video-overlay-text {
  font-family: "Gotham Medium", sans-serif;
  font-size: 2.3vmin;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.1em;
  color: #939598;
  text-transform: uppercase;
  max-width: 100%;
  width: 100%;
  opacity: 0;
  will-change: opacity;
}

.video-overlay-cta {
  font-family: "Gotham Medium", sans-serif;
  font-size: 2.3vmin;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity;
}

/* Overlay text fades in after video animation completes (1.6s = 0.2s delay + 1.4s video anim) */
.is-loaded .video-overlay-text {
  opacity: 1;
  transition: opacity 0.6s var(--ease-build) 1s;
}

.is-loaded .video-overlay-cta {
  opacity: 1;
  transition: opacity 1.6s var(--ease-build) 1.6s;
}

/* Overlay text hides with container when clicked */
.video-overlay.is-hidden .video-overlay-text,
.video-overlay.is-hidden .video-overlay-cta {
  opacity: 0;
  transition: opacity 0.3s var(--ease-build);
}

/* ========================================
   ANIMATION LOADED STATES
   ======================================== */

/* Icon staggered roll-in animation */
.is-loaded .top-icons .icon {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0) rotate(0deg);
}

.is-loaded .top-icons .icon:nth-child(1) {
  transition: opacity var(--anim-header) var(--ease-build) var(--delay-header),
    filter var(--anim-header) var(--ease-build) var(--delay-header),
    transform var(--anim-header) var(--ease-build) var(--delay-header);
}

.is-loaded .top-icons .icon:nth-child(2) {
  transition: opacity var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.08s),
    filter var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.08s),
    transform var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.08s);
}

.is-loaded .top-icons .icon:nth-child(3) {
  transition: opacity var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.16s),
    filter var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.16s),
    transform var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.16s);
}

.is-loaded .top-icons .icon:nth-child(4) {
  transition: opacity var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.24s),
    filter var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.24s),
    transform var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.24s);
}

.is-loaded .top-icons .icon:nth-child(5) {
  transition: opacity var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.32s),
    filter var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.32s),
    transform var(--anim-header) var(--ease-build)
      calc(var(--delay-header) + 0.32s);
}

.is-loaded .logo-container {
  clip-path: inset(0 0% 0 0);
  transition: clip-path var(--anim-header) var(--ease-build)
    calc(var(--delay-header) + 0.1s);
}

.is-loaded .video-container {
  clip-path: inset(0% 0% 0% 0%);
  filter: blur(0px);
  transform: scale(1);
  transition: clip-path var(--anim-video) var(--ease-build-slow)
      var(--delay-video),
    filter var(--anim-video) var(--ease-build-slow) var(--delay-video),
    transform var(--anim-video) var(--ease-build-slow) var(--delay-video);
}

.is-loaded .wordmark-strip {
  opacity: 1;
  filter: blur(0px);
  transition: opacity 0.8s var(--ease-build) 1s,
    filter 0.8s var(--ease-build) 1s;
}

.is-loaded .panel-left {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition: opacity var(--anim-text) var(--ease-build-slow) var(--delay-text),
    filter var(--anim-text) var(--ease-build-slow) var(--delay-text),
    transform var(--anim-text) var(--ease-build-slow) var(--delay-text);
}

.is-loaded .panel-middle {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition: opacity var(--anim-text) var(--ease-build-slow)
      calc(var(--delay-text) + 0.1s),
    filter var(--anim-text) var(--ease-build-slow)
      calc(var(--delay-text) + 0.1s),
    transform var(--anim-text) var(--ease-build-slow)
      calc(var(--delay-text) + 0.1s);
}

.is-loaded .panel-right {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition: opacity var(--anim-text) var(--ease-build-slow)
      calc(var(--delay-text) + 0.15s),
    filter var(--anim-text) var(--ease-build-slow)
      calc(var(--delay-text) + 0.15s),
    transform var(--anim-text) var(--ease-build-slow)
      calc(var(--delay-text) + 0.15s);
}

/* ========================================
   REDUCED MOTION - ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .top-icons,
  .logo-container,
  .video-container,
  .wordmark-strip,
  .panel-left,
  .panel-middle,
  .panel-right {
    clip-path: none;
    filter: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ========================================
   BASE LAYOUT STYLES
   ======================================== */

/* Top left icons */
.top-icons {
  position: absolute;
  top: 6.373%;
  left: 2.917%;
  display: flex;
  column-gap: 2.5%;
  flex-direction: row;
  width: 100%;
}

.top-icons .icon {
  width: 1.5vmin;
  height: auto;
}

/* Logo container - top right */
.logo-container {
  position: absolute;
  top: 2.451%;
  right: 2.917%;
  width: 16.917%;
  height: 6.569%;
}

.logo-svg {
  width: 100%;
  height: 100%;
}

/* Video container */
.video-container {
  position: absolute;
  top: 10.784%;
  left: 2.917%;
  width: 94.167%;
  height: 62.255%;
  overflow: hidden;
  background-color: #000000;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Wordmark strip - decorative codes */
.wordmark-strip {
  position: absolute;
  top: 73.7%;
  left: 2.917%;
  width: 94.167%;
  height: 0.8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wordmark-letter {
  font-family: "Gotham Medium", sans-serif;
  font-size: 0.49vmin;
  font-weight: 500;
  letter-spacing: 0.05vmin;
  color: #000000;
  text-transform: uppercase;
}

/* Bottom panels container */
.bottom-panels {
  position: absolute;
  top: 75%;
  left: 2.917%;
  width: 94.167%;
  height: 21.569%;
  display: flex;
  gap: 1.833%;
}

/* Panel shared styles */
.panel {
  height: 100%;
  background-color: #1a1a1a;
  padding: 3vmin 2.8vmin;
}

/* Three equal-width panels */
.panel-left,
.panel-middle,
.panel-right {
  width: 32.11%;
}

/* Panel title */
.panel-title {
  font-family: "Gotham Medium", sans-serif;
  font-size: 1.46vmin;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #939598;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Tagline text */
.tagline {
  font-family: "Gotham Medium", sans-serif;
  font-size: 1.76vmin;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.1em;
  color: #939598;
  text-transform: uppercase;
}

/* Message text */
.message {
  font-family: "TradeGothic LT", sans-serif;
  font-size: 1.57vmin;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #939598;
}

/* Contact icons */
.contact-icons {
  display: flex;
  gap: 1.5vmin;
  margin-top: 1.96vmin;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-icon {
  width: 1.37vmin;
  height: 1.37vmin;
  color: #939598;
}

.contact-link:hover .contact-icon {
  color: #ffffff;
}

/* Mobile responsive - stack bottom panels vertically */
@media (max-width: 960px) {
.bottom-panels {
  height:25%;
}
}
@media (max-width: 768px) {
  .bottom-panels {
    flex-direction: column;
    height: auto;
    gap: 2vmin;
  }

  .panel-left,
  .panel-middle,
  .panel-right {
    width: 100%;
    height: auto;
   
  }
}