/* CREANODE homepage: story layout */
@keyframes homeHeroCopyEnter {
  from {
    opacity: 0;
    transform: translate3d(0, -82px, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes homeTileFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

.home-story-card {position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(560px, 70vh, 760px);
  padding: clamp(28px, 3.2vw, 48px);
  border: 1px solid rgba(245, 242, 223, .15);
  border-radius: clamp(24px, 2.6vw, 34px);
  color: rgba(255, 248, 232, .88);
  background:
    radial-gradient(circle at 78% 14%, rgba(217, 201, 142, .12), transparent 18rem),
    radial-gradient(circle at 24% 78%, rgba(245, 242, 223, .055), transparent 18rem),
    linear-gradient(145deg, rgba(245, 242, 223, .060), rgba(21, 25, 20, .48) 56%, rgba(228, 154, 46, .020));
  box-shadow: 0 32px 110px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px) saturate(120%);}

.home-story-card::before {content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(245, 242, 223, .060) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 242, 223, .050) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 68% 30%, black, transparent 78%);
  pointer-events: none;}

.home-story-card::after {content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 248, 232, .055) 43%, rgba(217, 201, 142, .050) 50%, transparent 66%);
  opacity: .40;
  pointer-events: none;}

.home-story-card > * {position: relative;
  z-index: 1;}

.home-story-right-kicker {width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(26px, 3.2vw, 42px);
  color: rgba(255, 248, 232, .95);
  font-size: clamp(.78rem, .8vw, .94rem);
  font-weight: 600;
  letter-spacing: .075em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(255, 248, 232, .13), 0 0 28px rgba(217, 201, 142, .08);}

.home-story-right-kicker::before,
.home-story-right-kicker::after {content: "";
  display: block;
  width: clamp(28px, 4vw, 74px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 201, 142, .74), rgba(245, 242, 223, .28), transparent);
  box-shadow: 0 0 18px rgba(217, 201, 142, .16);}

.home-story-right-kicker::after {width: clamp(18px, 2.5vw, 46px);
  opacity: .55;}

.home-card-headline > span {display: block;
  margin: 0 0 14px;
  color: rgba(217, 201, 142, .92);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;}

.home-card-headline h3 {margin: 0;
  color: #fffbea;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 4.1rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;}

.home-card-headline p {max-width: 830px;
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: rgba(255, 248, 232, .76);
  font-size: clamp(.98rem, 1.05vw, 1.14rem);
  line-height: 1.72;}

.home-story.home-hero {padding-top: clamp(142px, 16vh, 178px);
  padding-bottom: clamp(92px, 12vw, 156px);
  overflow: visible;}

.home-story.home-hero .sticky-scroll-grid,
.home-story-grid {width: min(1500px, 100%);
  grid-template-columns: minmax(340px, .60fr) minmax(620px, 1.20fr);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;}

.home-story.home-hero .sticky-scroll-copy,
.home-story-copy {grid-column: 1;
  top: clamp(118px, 15vh, 166px);
  min-height: 70vh;}

.home-story.home-hero .sticky-scroll-copy-inner,
.home-story-copy-inner {width: min(610px, 100%);}

.home-story.home-hero .sticky-scroll-track,
.home-story-track {grid-column: 2;
  display: grid;
  gap: clamp(36px, 8vh, 96px);
  padding-top: 0;
  justify-items: stretch;}

.home-story.home-hero .sticky-scroll-item,
.home-story-item {width: 100%;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: stretch;}

.home-story.home-hero .sticky-scroll-item:first-child,
.home-story-item-hero {min-height: 78vh;
  padding-top: 0;
  align-items: flex-start;
  justify-content: center;}

.home-story-item-content {align-items: center;}

.home-story .home-story-card {min-height: clamp(560px, 70vh, 760px);}

.home-story.home-hero .sticky-scroll-title {font-size: clamp(1.62rem, 2.62vw, 3.35rem);
  line-height: 1.045;}

.home-story.home-hero .sticky-scroll-lead {max-width: 570px;
  color: rgba(255, 248, 232, .78);
  font-size: clamp(.98rem, 1.04vw, 1.18rem);
  line-height: 1.76;}

.home-story.home-hero {padding-top: clamp(138px, 15vh, 172px);
  padding-bottom: clamp(76px, 10vw, 132px);}

.home-story.home-hero .sticky-scroll-grid,
.home-story-grid {grid-template-columns: minmax(330px, .58fr) minmax(650px, 1.24fr);
  gap: clamp(40px, 6.4vw, 116px);}

.home-story.home-hero .sticky-scroll-copy,
.home-story-copy {top: clamp(112px, 14vh, 154px);
  min-height: 72vh;}

.home-story.home-hero .sticky-scroll-track,
.home-story-track {gap: clamp(28px, 7vh, 82px);}

.home-story.home-hero .sticky-scroll-item,
.home-story-item {min-height: 82vh;}

.home-story.home-hero .sticky-scroll-title {max-width: 660px;
  font-size: clamp(1.76rem, 2.75vw, 3.55rem);}

.home-story.home-hero .sticky-scroll-lead {max-width: 600px;
  color: rgba(255, 248, 232, .82);}

.home-story.home-hero .sticky-scroll-action-primary {min-width: 136px;}

.home-story.home-hero .sticky-scroll-action:not(.sticky-scroll-action-primary) {min-width: 190px;}

.home-story.home-hero .home-story-item-hero {align-items: flex-start;}

.home-story.home-hero .home-story-item-hero .home-hero-os-shell {align-self: flex-start;}

@keyframes homeProcessRotate {
  to { transform: rotate(360deg); }
}

@keyframes homeProcessPulse {
  0%, 100% { opacity: .42; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}