/*! LAYOUT & COPY !*/

:root {
  /* set this to your real header height so the bg reaches page top */
  --header-h: 200px;
}

.story-copy {
  text-align: center;
  will-change: opacity, transform, filter;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}

.story-copy h1 {
  justify-self: center;
  font-size: clamp(3rem, 8vw, 6rem) !important;
  line-height: 0.95;
  font-weight: 300;
  margin-bottom: 3rem;
}

.story-copy h4 {
  justify-self: center;
  max-width: 45ch;
  font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.home-sections {
  margin: 0 auto;
  padding-top: 0;
  width: min(1550px, 92vw);
}

.home-sections > .story-block:first-child {
  margin-top: 5rem;
}

.story-block {
  display: grid;
  gap: 0rem;
}

#innovation { margin-bottom: 5rem; }
#fusion     { margin-bottom: 15rem; }

.mini-footer {
  margin:0;
}

.mini-footer-wrapper {
  padding: 1rem 2rem;
}

.static-footer {margin-bottom: 0;}

@media (max-width: 768px) { 
  .mini-footer-wrapper {
  padding: 1rem;}
}

/*! ICON STAGE (FREE-FORM) + COMPOSITIONS !*/

.icon-stage {
  position: relative;
  width: 100%;
  margin-inline: auto;
  transform: scale(.985);
  transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.2,.75,.2,1);
}

.icon-stage.is-inview {
  transform: scale(1);
}

.icon-stage .icon {
  position: absolute;
  width: var(--w, 30%);
  left: var(--x, 0%);
  top: var(--y, 0%);
  opacity: 1;
  visibility: visible;
  transform: none;
  will-change: transform;
}

.icon-stage .icon img {
  display: block;
  width: 125%;
  height: auto;
}

.icon-stage.icon-auto {
  min-height: 0;
  height: auto;
}

.icon-five {
  z-index: 4;
  min-height: clamp(420px, 46vw, 640px);
}

.icon-five .i1 { --w: 30%; --x: 0%; --y: 10%; }
.icon-five .i2 { --w: 30%; --x: 32.5%; --y: 10%; }
.icon-five .i3 { --w: 30%; --x: 65%;     --y: 10%; }
.icon-five .i4 { --w: 30%; --x: 16.25%;  --y: 45%; }
.icon-five .i5 { --w: 30%; --x: 48.75%;  --y: 45%; }

.icon-seven {
  --row1: 0%;
  --row2: 25%;
  --row3: 50%;
  min-height: clamp(640px, 68vw, 980px);
}

.icon-seven .i1 { --w: 30%; --x: 16.25%; --y: var(--row1); }
.icon-seven .i2 { --w: 30%; --x: 48.75%; --y: var(--row1); }

.icon-seven .i3 { --w: 30%; --x: 0%;     --y: var(--row2); }
.icon-seven .i4 { --w: 30%; --x: 32.5%;  --y: var(--row2); }
.icon-seven .i5 { --w: 30%; --x: 65%;    --y: var(--row2); }

.icon-seven .i6 { --w: 30%; --x: 16.25%; --y: var(--row3); }
.icon-seven .i7 { --w: 30%; --x: 48.75%; --y: var(--row3); }

/*! RESPONSIVE PORTRAIT!*/

@media screen and (orientation: portrait) {
  .icon-five {
    min-height: clamp(800px, 70vh, 1000px);
  }

  .icon-five .i1 { --w: 45%; --x: -2.5%;  --y: 20%; }
  .icon-five .i2 { --w: 45%; --x: 47.5%; --y: 20%; }
  .icon-five .i3 { --w: 45%; --x: 22.5%; --y: 40%; }
  .icon-five .i4 { --w: 45%; --x: -2.5%;  --y: 60%; }
  .icon-five .i5 { --w: 45%; --x: 47.5%; --y: 60%; }

  .icon-seven {
    max-height: 980px;
    min-height: clamp(640px, 75vh, 980px);
    --row1: 30%;
    --row2: 50%;
    --row3: 70%;
  }

  .icon-seven .i1 { --w: 45%; --x: 22.5%; --y: 0%; }
  .icon-seven .i2 { --w: 45%; --x: -2.5%;  --y: 25%; }

  .icon-seven .i3 { --w: 45%; --x: 47.5%; --y: 25%; }
  .icon-seven .i4 { --w: 45%; --x: 22.5%; --y: 50%; }
  .icon-seven .i5 { --w: 45%; --x: -2.5%;  --y: 75%; }

  .icon-seven .i6 { --w: 45%; --x: 47.5%; --y: 75%; }
  .icon-seven .i7 { --w: 45%; --x: 22.5%; --y: 100%; }

  .story-copy h1 { margin-bottom: 2rem; }

  .story-block { 
    margin-top: 0rem;
    margin-block: 5rem;
  }

  .home-sections { margin-top: 5vh; }

  .icon-stage.icon-five { margin-top: 0; }
  #fusion     { margin-bottom: 5rem; }
  #regenerative { margin-bottom: 15rem; }
}

@media (max-width: 600px) {
  .icon-five {
    min-height: clamp(800px, 70vh, 1000px);
  }

  .icon-five .i1 { --w: 62%; --x: -7%;  --y: 10%; }
  .icon-five .i2 { --w: 62%; --x: 30%; --y: 25%; }
  .icon-five .i3 { --w: 62%; --x: -7%; --y: 40%; }
  .icon-five .i4 { --w: 62%; --x: 30%;  --y: 55%; }
  .icon-five .i5 { --w: 62%; --x: -7%; --y: 70%; }

  .icon-seven {
    max-height: 980px;
    min-height: clamp(640px, 75vh, 980px);
    --row1: 30%;
    --row2: 50%;
    --row3: 70%;
  }

  .icon-seven .i1 { --w: 62%; --x: -7%; --y: 0%; }
  .icon-seven .i2 { --w: 62%; --x: 30%;  --y: 15%; }

  .icon-seven .i3 { --w: 62%; --x: -7%; --y: 30%; }
  .icon-seven .i4 { --w: 62%; --x: 30%; --y: 45%; }
  .icon-seven .i5 { --w: 62%; --x: -7%;  --y: 60%; }

  .icon-seven .i6 { --w: 62%; --x: 30%; --y: 75%; }
  .icon-seven .i7 { --w: 62%; --x: -7%; --y: 90%; }

  .story-copy h1 { margin-bottom: 2rem; }
  .story-copy h4 { max-width: 32ch; }

  .story-block { 
    margin-top: 0rem;
    margin-block: 0;
  }

  .home-sections { 
    margin-top: 5vh;
    margin: 0 auto;
    padding-top: 0;
    width: min(1550px, 92vw);
  }


  .icon-stage.icon-five { margin-top: 0; }
  #fusion     { margin-bottom: 0rem; }
  #regenerative { margin-bottom: 8rem; }
  #innovation { margin-bottom: 0rem; }

}



/*! TEXT VISIBILITY STATES !*/

.story-copy.is-in {
  opacity: 1;
  transform: none;
}

.story-copy.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}


/*! ANIMATIONS & KEYFRAMES !*/

@keyframes iconNudgeUp {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.icon-stage .icon.nudge-once {
  animation: iconNudgeUp 650ms cubic-bezier(.2,.75,.2,1) both;
}

@keyframes iconRise {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--riseY, -8vh)); }
}

.icon-stage .icon.rise-once {
  animation: iconRise 900ms cubic-bezier(.18,.72,.16,1) both;
}


/*! FLOATY GRADIENT BACKGROUND (PURE CSS) !*/

@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x2 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --y2 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --x3 { syntax: '<percentage>'; inherits: false; initial-value: 48%; }
@property --y3 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }


.site-header {
  z-index: 10;
}

.body {
  position: relative;
  background: none;
  overscroll-behavior-x: none;
}

.body::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-h)) 0 0 0;
  z-index: -1;
  pointer-events: none;

  --c1: 180 180 180;
  --c2: 255 255 255;
  --c3: 100 100 100;

  --x1: 18%; --y1: 22%;
  --x2: 78%; --y2: 18%;
  --x3: 48%; --y3: 78%;

  background:
    radial-gradient(55% 65% at var(--x1) var(--y1), rgb(var(--c1) / .28) 0%, rgb(var(--c1) / 0) 60%),
    radial-gradient(60% 70% at var(--x2) var(--y2), rgb(var(--c2) / .24) 0%, rgb(var(--c2) / 0) 62%),
    radial-gradient(60% 60% at var(--x3) var(--y3), rgb(var(--c3) / .22) 0%, rgb(var(--c3) / 0) 58%),
    linear-gradient(180deg, #fafafa 0%, #e9e9e9 100%);
  background-repeat: no-repeat;
  background-size: 140% 140%, 150% 150%, 160% 160%, 100% 100%;
  filter: saturate(108%) contrast(102%);
  animation:
    plasma-drift 5s ease-in-out infinite alternate,
    plasma-breathe 5s ease-in-out infinite alternate;
}

@keyframes plasma-drift {
  0%   { --x1: 18%; --y1: 22%; --x2: 78%; --y2: 18%; --x3: 48%; --y3: 78%; }
  33%  { --x1: 28%; --y1: 34%; --x2: 70%; --y2: 30%; --x3: 58%; --y3: 66%; }
  66%  { --x1: 62%; --y1: 44%; --x2: 40%; --y2: 76%; --x3: 40%; --y3: 34%; }
  100% { --x1: 72%; --y1: 38%; --x2: 28%; --y2: 68%; --x3: 32%; --y3: 28%; }
}

@keyframes plasma-breathe {
  0%   { background-size: 140% 140%, 150% 150%, 160% 160%, 100% 100%; }
  50%  { background-size: 150% 150%, 160% 160%, 170% 170%, 100% 100%; }
  100% { background-size: 135% 135%, 145% 145%, 155% 155%, 100% 100%; }
}

@media screen and (orientation: portrait) { 
  .body::before {animation: none;} 
}

/*! REDUCED MOTION !*/

@media (prefers-reduced-motion: reduce) {
  .story-copy,
  .icon-stage {
    transition: none !important;
    transform: none !important;
  }
  .icon-stage .icon {
    animation: none !important;
  }
  .body::before {
    animation: none !important;   /* updated to target ::before */
  }
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;   /* modern */
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }  /* fallback */
}


/*! BIRDS */

.fx-under-icons{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  transform: translateY(var(--pinY, 0px));
  pointer-events: none;
  z-index: 0;
}

.fx-under-icons__video{
  display: block;
  width: 100%;
  height: auto;
}

.story-copy,
.icon-stage {
  position: relative;
  z-index: 5;
}


/*! HOVERS !*/

/* === ICON HOVER SYSTEM === */

/* default transition for icons */
.icon-stage .icon {
  transition: transform .35s cubic-bezier(.2,.75,.2,1), opacity .25s ease, filter .25s ease;
  cursor: pointer;
}

/* when the stage is “active”, dim all icons a bit */
.icon-stage.is-hovering .icon {
  opacity: .4;
  filter: grayscale(12%) contrast(95%);
}

/* the hovered one pops back */
.icon-stage .icon.is-hot {
  opacity: 1;
  filter: none;
  transform: translateY(-2.2vh) scale(1.035);
  z-index: 8; /* above neighbors */
}

/* ===== Floating info card ===== */
.icon-info{
  position: fixed;
  left: 0;               /* default; JS updates these */
  top: 0;                /* default; JS updates these */
  /* REMOVE the inset line entirely (it causes the stretching) */
  transform: translate(-50%, -50%);   /* center on the pointer */
  width: clamp(260px, 20vw, 320px);   /* fixed width = stable layout */
  max-width: 320px;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 20;
  pointer-events: none;
}

.icon-info.is-visible { display: block; animation: infoIn .24s ease both; }
@keyframes infoIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}



.icon-info .info-title {
  display: inline-flex;
  padding: 8px 10px 5px 10px;
  border: 1.5px solid #111;
  border-radius: 999px;
  margin-bottom: 10px;
  line-height: 1;
  align-items: center;
  width: calc(100% - 1.5rem);
}

.icon-info .info-text {
  font-size: .95rem;
  line-height: 1.35;
  color: #333;
  margin: 6px 0 12px;
}

/* .icon-info .info-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid #111;
  font-size: .9rem;
  text-decoration: none;
  color: #111;
  background: #fff;
  pointer-events: auto;
}

.icon-info .info-cta:after { content: "↗"; } */

/* mobile: keep things simpler */
@media (max-width: 768px) {
  .icon-stage.is-hovering .icon { opacity: 1; filter: none; }
  .icon-info { display: none !important; }
}

/* Make the PNG purely visual (rect doesn’t capture the mouse) */
.icon-stage .icon img { pointer-events: none; }

/* Position the hit SVG over the image */
.icon-stage .icon .hit-svg {
  position: absolute;
  inset: 0;
}

/* The path is transparent but interactive */
.icon-stage .icon .hit {
  fill: currentColor;           /* anything “visible” works; we set opacity to 0 */
  opacity: 0;                   /* invisible */
  pointer-events: visibleFill;  /* only filled region is clickable/hoverable */
  cursor: pointer;
}

/* (Optional) debug the shape for tuning */
/* .icon-stage .icon .hit { opacity: .12; fill: rgba(0,0,0,.1); } */