/* Caylios landing page — brand contract: docs/caylios/brand-kit.md */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-var.woff2') format('woff2');
}
/* Carlito is the approved open-licence web substitute for Calibri (metric-compatible). */
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/carlito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/carlito-700.woff2') format('woff2');
}

:root {
  --midnight-indigo: #150A32;
  --digital-teal: #20B4C9;
  --electric-mint: #15F5BA;
  --white: #FFFFFF;
  --heading: 'Montserrat', Arial, sans-serif;
  --body: 'Carlito', Calibri, sans-serif;
  --cycle: 9s;
}

* { box-sizing: border-box; margin: 0; }

html, body {
  min-height: 100svh;
  background: var(--midnight-indigo);
  color: var(--white);
  font-family: var(--body);
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 5vw, 4rem);
  max-width: 90rem;
  margin: 0 auto;
}

.hero__lockup {
  width: clamp(11rem, 18vw, 16rem);
  height: auto;
}

.hero__main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.hero__copy {
  text-align: right;
  justify-self: end;
}

.hero__lead {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
  line-height: 1.18;
  color: var(--white);
  max-width: 15em;
}

.hero__tag {
  margin-top: 1.5rem;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--digital-teal);
}

/* z-index above the header so the travelling C passes in front of the lockup;
   overflow visible so it is never clipped at the stage boundary. */
.hero__animation { min-width: 0; position: relative; z-index: 2; }
#flow { width: 100%; height: auto; display: block; overflow: visible; }

.hero__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 1.5rem;
}
.hero__footer a { color: var(--digital-teal); text-decoration: none; }
.hero__footer a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

@media (max-width: 56rem) {
  .hero__main {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .hero__copy { order: -1; text-align: center; justify-self: center; }
  .hero__lead { margin-inline: auto; }
  .hero__animation { width: min(100%, 26rem); }
}

/* ---- Flow animation ---- */

#flow image, #flow g, #flow rect {
  transform-box: fill-box;
  transform-origin: center;
}

.doc-in, .doc-out { opacity: 0; will-change: transform, opacity; }

/* ---- Loop phases (driven by main.js) ----
   (empty)   → C sits over the header lockup, stage empty
   on-stage  → C travels down to its stage position
   pop-left  → inbound icons fade in
   pop-right → destination tiles fade in
   flowing   → document flow runs (two cycles, counted in JS)
   fading    → everything but the C fades out, then the C returns */

#cwrap {
  transform: translate(var(--cdx, 0px), var(--cdy, 0px)) scale(var(--cs, 1));
  opacity: 0; /* invisible while docked — the lockup's own C stands in */
  will-change: transform, opacity;
}
/* Transition only while travelling — the reset must snap instantly.
   The opacity fades mask the dock/undock moments: the two C artworks differ
   slightly, so they are never shown fully overlapped. */
.on-stage #cwrap {
  transform: none;
  opacity: 1;
  transition: transform 1.8s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.35s ease;
}
.fading:not(.on-stage) #cwrap {
  opacity: 0;
  transition: transform 1.8s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s ease 1s;
}

/* Tiles leave early, before the outro (timed from flow start in main.js) */
.hide-tiles .tile {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

#cmark { animation: cpulse 3s ease-in-out infinite; }
@keyframes cpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* Populate: inbound icons fade in at rest, staggered.
   visibility guards against hairline rendering artifacts while hidden. */
.doc-in, .doc-out { visibility: hidden; }
.doc-in { transition: opacity 0.5s ease; }
.pop-left .doc-in { opacity: 0.9; visibility: visible; }
.flowing .doc-out { visibility: visible; }
.pop-left #in2 { transition-delay: 0.12s; }
.pop-left #in3 { transition-delay: 0.24s; }
.pop-left #in4 { transition-delay: 0.36s; }
.pop-left #in5 { transition-delay: 0.48s; }
.pop-left #in6 { transition-delay: 0.6s; }

/* Fade-out before the C returns */
.fading .doc-in, .fading .doc-out {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.fading .tile {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* Inbound: appear at rest, get drawn into the C, vanish — exactly two
   journeys per loop, holding the hidden end state until the outro */
.flowing .doc-in { animation: var(--cycle) ease-in-out 2 forwards; }
/* Positive staggered delays: the first cycle builds up naturally from rest
   instead of starting mid-stream. */
.flowing #in1 { animation-name: in1; animation-delay: 0s; }
.flowing #in2 { animation-name: in2; animation-delay: 0.7s; }
.flowing #in3 { animation-name: in3; animation-delay: 1.4s; }
.flowing #in4 { animation-name: in4; animation-delay: 2.1s; }
.flowing #in5 { animation-name: in5; animation-delay: 2.8s; }
.flowing #in6 { animation-name: in6; animation-delay: 3.5s; }

@keyframes in1 {
  0% { transform: none; opacity: 0.9; }
  8%, 20% { transform: none; opacity: 1; }
  55% { transform: translate(372px, 322px) scale(0.3); opacity: 1; }
  62%, 100% { transform: translate(372px, 322px) scale(0.3); opacity: 0; }
}
@keyframes in2 {
  0% { transform: none; opacity: 0.9; }
  8%, 20% { transform: none; opacity: 1; }
  55% { transform: translate(255px, 185px) scale(0.3); opacity: 1; }
  62%, 100% { transform: translate(255px, 185px) scale(0.3); opacity: 0; }
}
@keyframes in3 {
  0% { transform: none; opacity: 0.9; }
  8%, 20% { transform: none; opacity: 1; }
  55% { transform: translate(398px, 43px) scale(0.3); opacity: 1; }
  62%, 100% { transform: translate(398px, 43px) scale(0.3); opacity: 0; }
}
@keyframes in4 {
  0% { transform: none; opacity: 0.9; }
  8%, 20% { transform: none; opacity: 1; }
  55% { transform: translate(271px, -104px) scale(0.3); opacity: 1; }
  62%, 100% { transform: translate(271px, -104px) scale(0.3); opacity: 0; }
}
@keyframes in5 {
  0% { transform: none; opacity: 0.9; }
  8%, 20% { transform: none; opacity: 1; }
  55% { transform: translate(384px, -246px) scale(0.3); opacity: 1; }
  62%, 100% { transform: translate(384px, -246px) scale(0.3); opacity: 0; }
}
@keyframes in6 {
  0% { transform: none; opacity: 0.9; }
  8%, 20% { transform: none; opacity: 1; }
  55% { transform: translate(246px, -364px) scale(0.3); opacity: 1; }
  62%, 100% { transform: translate(246px, -364px) scale(0.3); opacity: 0; }
}

/* Outbound: emerge from the C, land on a tile, fade */
.flowing .doc-out { animation: var(--cycle) ease-in-out 2 forwards; }
/* Outbound starts once the first inbound doc has reached the C (~5s in) */
.flowing #out1 { animation-name: out1; animation-delay: 5s; }
.flowing #out2 { animation-name: out2; animation-delay: 5.9s; }
.flowing #out3 { animation-name: out3; animation-delay: 6.8s; }
.flowing #out4 { animation-name: out4; animation-delay: 7.7s; }

@keyframes out1 {
  0% { transform: scale(0.4); opacity: 0; }
  8% { transform: scale(0.5); opacity: 1; }
  50%, 58% { transform: translate(368px, -345px) scale(1); opacity: 1; }
  68%, 100% { transform: translate(368px, -345px) scale(1); opacity: 0; }
}
@keyframes out2 {
  0% { transform: scale(0.4); opacity: 0; }
  8% { transform: scale(0.5); opacity: 1; }
  50%, 58% { transform: translate(368px, -125px) scale(1); opacity: 1; }
  68%, 100% { transform: translate(368px, -125px) scale(1); opacity: 0; }
}
@keyframes out3 {
  0% { transform: scale(0.4); opacity: 0; }
  8% { transform: scale(0.5); opacity: 1; }
  50%, 58% { transform: translate(368px, 95px) scale(1); opacity: 1; }
  68%, 100% { transform: translate(368px, 95px) scale(1); opacity: 0; }
}
@keyframes out4 {
  0% { transform: scale(0.4); opacity: 0; }
  8% { transform: scale(0.5); opacity: 1; }
  50%, 58% { transform: translate(368px, 315px) scale(1); opacity: 1; }
  68%, 100% { transform: translate(368px, 315px) scale(1); opacity: 0; }
}

/* Destination tiles */
.tile { opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.pop-right .tile { opacity: 1; visibility: visible; }
.pop-right #tile2 { transition-delay: 0.12s; }
.pop-right #tile3 { transition-delay: 0.24s; }
.pop-right #tile4 { transition-delay: 0.36s; }

.tile rect {
  fill: rgba(32, 180, 201, 0.10);
  stroke: var(--digital-teal);
  stroke-width: 2.5;
}
.flowing .tile rect { animation: tilepulse var(--cycle) ease-in-out 2; }
.tile text {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 30px;
  fill: var(--white);
  text-anchor: middle;
}
/* Pulse delays match each tile's outbound doc so the flash lands on arrival */
.flowing #tile1 rect { animation-delay: 5s; }
.flowing #tile2 rect { animation-delay: 5.9s; }
.flowing #tile3 rect { animation-delay: 6.8s; }
.flowing #tile4 rect { animation-delay: 7.7s; }

@keyframes tilepulse {
  0%, 46%, 70%, 100% { stroke: var(--digital-teal); fill: rgba(32, 180, 201, 0.10); }
  54%, 60% { stroke: var(--electric-mint); fill: rgba(21, 245, 186, 0.12); }
}

/* Motion runs unconditionally (Director decision 2026-07-29): the OS
   reduced-motion preference is intentionally not honoured because it made
   the page appear broken on machines with Windows "Animation effects" off.
   Accessibility is preserved via the visible pause control below. */
html.motion-paused #flow image,
html.motion-paused .tile rect { animation-play-state: paused; }

#motion-toggle {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}
#motion-toggle:hover,
#motion-toggle:focus-visible {
  color: var(--white);
  border-color: var(--digital-teal);
}