/* =====================
   JOURNEY HERO — MONTAGE (CLEAN)
===================== */
.journey-hero--montage{
  position:relative;
  min-height: calc(100vh - (var(--gb-height) + var(--header-height)));
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
}

@media (max-width:767px){
  .journey-hero--montage{
    min-height: calc(100vh - (var(--gb-height) + var(--header-height-m)));
  }
}

/* Layers wrapper */
.journey-hero__layers{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* All layers fill */
.journey-hero__bg,
.journey-hero__shine,
.journey-hero__light,
.journey-hero__vignette,
.journey-hero__grain{
  position:absolute;
  inset:0;
}

/* 1) Background image */
.journey-hero__bg{
  z-index:1;
  background: url("https://cdn-smg55.starmediagroup.my/Themes/img/journey-archive-montage-1.png") center / cover no-repeat;
  opacity:.62;
  filter: grayscale(.28) contrast(1.08) saturate(.85) brightness(.70);
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform;
}

/* 2) Premium gradient shine (subtle, editorial) */
.journey-hero__shine{
  z-index:2;
  background:
    radial-gradient(900px 420px at 30% 25%, rgba(252,175,23,.10), transparent 60%),
    radial-gradient(900px 520px at 70% 35%, rgba(218,33,40,.10), transparent 62%),
    linear-gradient(120deg, rgba(0,43,73,.55), rgba(0,0,0,.35));
  mix-blend-mode: screen;
  opacity:.35;
}

/* 3) Slow light sweep */
.journey-hero__light{
  z-index:3;
  background: linear-gradient(
    120deg,
    transparent 42%,
    rgba(255,255,255,0.06) 50%,
    transparent 58%
  );
  animation: heroLight 14s linear infinite;
  opacity:.8;
}

@keyframes heroLight{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

/* 4) Vignette (center lifted, edges darker) */
.journey-hero__vignette{
  z-index:4;
   background:
     radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.12) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.55) 100%
  );
}

/* 5) Film grain */
.journey-hero__grain{
  z-index:5;
  opacity:.14;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
}

.journey-hero__gradient{
  position:absolute;
  inset:0;
  z-index:2;

  background: linear-gradient(
    120deg,
    rgba(18,104,179,0.35),
    rgba(252,175,23,0.25),
    rgba(218,33,40,0.30),
    rgba(18,104,179,0.35)
  );

  background-size: 300% 300%;
  animation: gradientFlow 22s ease infinite;

  mix-blend-mode: soft-light;
  opacity:.65;
}

@keyframes gradientFlow{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}

/* Content */
.journey-hero--montage .container{
  position:relative;
  z-index:10;
}

.journey-hero__content{
  max-width:860px;
  margin:0 auto;
  text-align:center;
  padding:70px 0 56px;
}

.journey-hero__quote{
  margin:0 0 14px;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(34px, 4.2vw, 60px);
  line-height:1.08;
  letter-spacing:.2px;
  text-shadow: 0 18px 50px rgba(0,0,0,.45);
  position:relative;
}

/* Big quote watermark (premium) */
.journey-hero__quote::before{
  content:"“";
  position:absolute;
  left:50%;
  top:-86px;
  transform:translateX(-50%);
  font-family:var(--font-serif);
  font-size:220px;
  line-height:1;
  color:rgba(255,255,255,.08);
  pointer-events:none;
}

/* Paper texture (VERY subtle, premium) */
.journey-hero__paper{
  z-index:4; /* after vignette, before grain */
  opacity:.10;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  transform: translateZ(0);
}

/* Make shine feel “alive” (slow drift) */
.journey-hero__shine{
  animation: shineDrift 18s ease-in-out infinite;
  will-change: transform;
}

@keyframes shineDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* Light sweep a bit softer */
.journey-hero__light{
  opacity:.55;           /* was .8 */
  filter: blur(0.2px);   /* soften edge */
}

/* Gold underline accent */
.journey-hero__quote::after{
  content:"";
  display:block;
  width:92px;
  height:2px;
  margin:16px auto 0;
  background: rgba(156,104,39,.85);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}

.journey-hero__subline{
  margin:14px auto 20px;
  max-width:640px;
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.55;
  text-shadow:0 10px 26px rgba(0,0,0,.35);
}

.journey-hero__cta{ margin-top:6px; }

@media (hover:hover) and (pointer:fine){
  .journey-hero__cta:hover{ transform: translateY(-1px); }
}

@media (max-width:560px){
  .journey-hero__content{ padding:56px 0 44px; }
  .journey-hero__subline{ font-size:13px; }
  .journey-hero__quote::after{ width:72px; }
  .journey-hero__quote::before{ top:-74px; font-size:190px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .journey-hero__light{ animation:none; }
  .journey-hero__bg{ transform:none !important; }
}

/* =========================================================
   2) MILESTONES (Era nav + slide stage)
========================================================= */
#milestones{
  scroll-margin-top: 100px;
}

.milestones{
  padding: 100px 0 80px;
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(0,43,73,.06), transparent 60%),
    #fff;
}

.milestones__head{
  margin-bottom: 30px;
}

.milestones__layout{
  display:grid;
  grid-template-columns: 190px 1fr;
  gap: 34px;
  align-items:start;
}

/* LEFT NAV */
.milestones__nav{
  position:relative;
  padding-right: 16px;
  transition: opacity .5s ease, transform .5s ease; /* for finale fade */
}

.milestones__nav::before{
  content:"";
  position:absolute;
  right: 40px;
  top: 6px;
  bottom: 6px;
  width:1px;
  background: rgba(156,104,39,.65);
  transition: opacity .5s ease; /* for finale fade */
}

.milestones__eras{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.era-btn{
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font-family: var(--font-sans);
  font-weight:700;
  font-size: 18px;
  color:#111;
  opacity:.55;
  padding: 6px 0 6px 14px;
  position:relative;
}

.era-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: transparent;
}

.era-btn.is-active{
  opacity:1;
  font-weight:900;
}

.era-btn.is-active::before{
  background:#B00000;
}

/* RIGHT STAGE */
.milestones__stage{
  position:relative;
  width:100%;
  max-width: 940px;
  min-height: 420px;
  touch-action: pan-y; /* allows vertical scroll, enables your swipe JS */
}

/* Deck / Slides */
.milestones__deck{ display:none; }
.milestones__deck.is-active{ display:block; }

.ms-slide{ display:none; user-select:none; }

.ms-slide.is-active{
  display:grid;
  grid-template-columns: minmax(280px, 1fr) 430px;
  gap: 34px;
  align-items:start;       /* text aligned top */
  min-height: 420px;       /* stable frame */
}

/* Copy */
.ms-copy{
  padding-left: 6px;
  align-self:start;
  min-height: 320px;       /* reduce jump between slides */
}

.ms-year{
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 60px;
  letter-spacing:-1px;
  line-height:1;
  margin: 0 0 8px;
  color:#111;
}

.ms-title{
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 12px;
  color:#222;
  max-width: 520px;
}

.ms-body{
  margin: 0 0 10px;
  color:#444;
  font-size: 15px;
  line-height:1.65;
  max-width: 520px;

  display:-webkit-box;
  x-webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Media */
.ms-media{
  min-height: 420px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  align-self:center;        /* image stays centered */
}

.ms-media img{
  max-width: 360px;
  max-height: 330px;
  height:auto;
  object-fit: contain;
}

/* Controls */
.ms-controls{ position:static; }

.ms-btn{
  border:0;
  background:#B00000;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;

}

.ms-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

.ms-float{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  z-index:5;
}

.ms-btn--prev{ left: -56px; }
.ms-btn--next{ right: -56px; }

.ms-float .material-symbols-outlined{
  font-size: 26px;
  line-height:1;
}

/* =========================================================
   Milestones Responsive
========================================================= */
@media (max-width:1024px){
  .milestones__layout{ grid-template-columns: 170px 1fr; }
  .milestones__stage{ max-width: 760px; }
  .ms-slide.is-active{ grid-template-columns: 1fr 360px; }
  .ms-btn--prev{ left:-48px; }
  .ms-btn--next{ right:-48px; }
}

/* Mobile / Tablet */
@media (max-width:820px){
  .milestones__layout{ display:block; }

  /* Era pills */
  .milestones__nav{
    padding:0;
    margin-bottom: 16px;
  }
  .milestones__nav::before{ display:none; }

  .milestones__eras{
    flex-direction:row;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom: 6px;
  }
  .milestones__eras > li{
    flex:0 0 auto;
    scroll-snap-align:start;
  }

  .era-btn{
    font-size: 13px;
    padding: 8px 14px;
    border:1px solid #e5e5e5;
    border-radius:999px;
    background:#fff;
    opacity:1;
    white-space:nowrap;
  }
  .era-btn::before{ display:none; }
  .era-btn.is-active{ border-color:#B00000; }

  /* Slide becomes stacked: copy then image */
  .milestones__stage{
    max-width:100%;
    min-height:auto;
  }

  .ms-slide.is-active{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    min-height:auto;
  }

  .ms-copy{
    min-height:auto;
    padding-left: 0;
  }

  /* tighter typography (one-screen) */
  .ms-year{ font-size: 44px; }
  .ms-title{ font-size: 20px; }

  .ms-body{
    font-size: 13px;
    line-height: 1.55;
    /-webkit-line-clamp: 4;/
  }

  .ms-media{
    min-height:auto;
    margin-top: 6px;
  }

  .ms-media img{
    width:100%;
    max-width:100%;
    max-height: 220px;     /* key: prevents scroll */
    height:auto;
    object-fit: contain;
  }

  /* Controls: no floating arrows; keep them accessible */
  .ms-float{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:44px;
    height:44px;
  }

  .ms-controls{
    display:flex;
    position: sticky;
    bottom: 10px;
    justify-content:flex-end;
    gap: 10px;
    margin-top: 10px;
    z-index: 10;
  }
}

/* =========================================================
   Finale + 2026 styling
========================================================= */
.ms-slide--final{
  text-align:left;
}

.ms-slide--final .ms-year{
  color:#B00000;
    font-size:55px;
}

/* Finale fade effect (JS adds .milestones--end on last slide) */
.milestones--end .milestones__nav{
  opacity:.35;
  transform: translateX(-6px);
}

.milestones--end .milestones__nav::before{
  opacity:.2;
}

/* keep active year visible even when faded */
.milestones--end .era-btn.is-active{
  opacity:1;
}

/* ==============
   3) IDENTITY
================= */
.identity{
  padding: 90px 0;
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(0,43,73,.06), transparent 60%),
    #fff;
}

.identity__head{
  margin-bottom: 22px;
}

/* Tabs */
.identity-tabs{
  display:flex;
  justify-content:center;
  gap: 26px;
  margin: 12px 0 30px;
}

.identity-tab{
  border:0;
  background:transparent;
  padding: 10px 8px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size:18px;
  color:#555;
  cursor:pointer;
  position:relative;
  letter-spacing:.2px;
}

.identity-tab::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 2px;
  height:3px;
  border-radius: 8px;
  background: transparent;
  transform: scaleX(.35);
  transform-origin:center;
  transition: .22s ease;
}

.identity-tab.is-active{
  color:#111;
}

.identity-tab.is-active::after{
  background: rgba(156,104,39,.85);
  transform: scaleX(1);
}

/* Panel */
.identity-panel{
  text-align:center;
}

/* Frame */
.identity-frame{
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 26px 18px 18px;
  position: relative;
}

/* Slider shell */
.identity-slider{
  position:relative;
}

/* viewport desktop */
.identity-viewport{
  overflow:visible;
  width:100%;
}

/* desktop line */
.identity-track{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  align-items:end;
  gap: 10px;
  width:100%;
}


/* Cards */
.identity-card{
  position:relative;
  z-index:1;
  min-width:0;
  padding: 0 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  opacity:0;
  transform: translateY(16px);
}

.identity-panel.is-visible .identity-card{
  animation: identityReveal .55s ease forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes identityReveal{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

.identity-logo{
  width:100%;

  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin: 0 0 14px;
}

.identity-logo img{
  width:auto;
  height:auto;
  max-width:110px;
  max-height:92px;
  object-fit:contain;
  filter: saturate(.98) contrast(1.02);
}

.identity-copy{
  min-height:52px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
}

.identity-year{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color:#111;
  letter-spacing:.2px;
}

.identity-text{
  margin:0;
  font-size: 12.5px;
  line-height: 1.45;
  color:#5b5b5b;
}

/* desktop arrows + dots hidden */
.identity-arrow,
.identity-dots{
  display:none;
}

/* ==============
   MOBILE SLIDER
================= */
@media (max-width: 767px){
  .identity{
    padding: 70px 0;
  }

  .identity-frame{
    width:min(560px, 100%);
    padding:16px 14px 12px;
    border-radius:16px;
  }

  .identity-slider{
    display:grid;
    grid-template-columns:44px 1fr 44px;
    align-items:center;
    gap:10px;
  }

  .identity-viewport{
    overflow:hidden;
    width:100%;
  }

  .identity-track{
    display:flex;
    gap:0;
    transition: transform .35s ease;
    will-change: transform;
  }

  .identity-track::before{
    display:none;
  }

  .identity-card{
    flex: 0 0 100%;
    min-width:100%;
    min-height:260px;
    padding: 10px 10px 4px;
    opacity:1;
    transform:none;
    animation:none !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .identity-logo{
    height:140px;
    min-height:140px;
    margin: 2px 0 12px;
    align-items:center;
  }

  .identity-logo img{
    max-height:110px;
    max-width:min(320px, 86%);
  }

  .identity-copy{
    min-height:54px;
  }

  .identity-year{
    font-size: 12.5px;
  }

  .identity-arrow{
    width:44px;
    height:44px;
    border-radius:999px;
    border:0;
    background:#B00000;
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow: 0 14px 30px rgba(176,0,0,.18);
    transition: transform .12s ease, opacity .12s ease, box-shadow .2s ease;
  }

  .identity-arrow:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(176,0,0,.22);
  }

  .identity-arrow:active{
    transform: scale(.96);
  }

  .identity-arrow[disabled]{
    opacity:.28;
    cursor:not-allowed;
    box-shadow:none;
  }

  .identity-arrow .material-symbols-outlined{
    font-size: 22px;
    line-height: 1;
  }

  .identity-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:10px;
  }

  .identity-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    border:0;
    background:#d9d9d9;
    cursor:pointer;
    padding:0;
  }

  .identity-dot.is-active{
    background:#111;
  }
}

@media (max-width: 560px){
  .identity-tabs{
    gap:18px;
  }

  .identity-tab{
    font-size:16px;
  }
}
/* =========================================================
   4) STARCHIVE
========================================================= */
.starchive{
  position:relative;
  padding: 76px 0 110px;
  background: var(--grey);
  overflow:hidden;
}

.starchive::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("https://cdn-smg55.starmediagroup.my/Themes/img/archive-paper-bg.svg") center / cover no-repeat;
  pointer-events:none;
  opacity: .95;
  z-index:0;
}

.starchive .container{
  position:relative;
  z-index:1;
}

.starchive .section-head{
  margin-bottom: 26px;
}

.starchive__layout{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items:center;
}

/* left copy */
.starchive__lead{
  font-size: 15px;
  line-height: 1.7;
  color:#1a1a1a;
  max-width: 560px;
  margin: 0 0 16px;
}
.starchive__question{
  margin: 16px 0 14px;
  font-size: 15px;
  color:#111;
}

/* controls */
.starchive__controls{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.starchive__select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  height:44px;
  min-width: 120px;
  padding: 0 42px 0 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color:#fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  font-size: 15px;
  color:#222;
  cursor:pointer;
}

.starchive__select:focus{
  border-color:#bdbdbd;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.starchive__cta{
  font-size: 16px;
  height:44px;
  padding: 0 18px;
  border:0;
  border-radius:8px;
  background:#B00000;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  box-shadow: 0 12px 26px rgba(176,0,0,.20);
}
.starchive__cta:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.starchive__alt{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 8px 0 22px;
}
.starchive__altText{ color:#333; }

.starchive__ghost{
  height:40px;
  padding: 0 18px;
  border-radius:999px;
  border:1px solid #1b1b1b;
  background:transparent;
  color:#1b1b1b;
  font-weight:500;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.starchive__ghost:hover{
  background:#fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.starchive__fineprint{
  max-width: 560px;
  color:#666;
  font-size: 12.5px;
  line-height: 1.55;
}
.starchive__fineprint a{
  color:#333;
  text-decoration: underline;
}

/* collage */
.starchive__right{
  display:flex;
  justify-content:center;
}

.starchive__collage{
  position:relative;
  width: min(520px, 100%);
  height: 360px;
}

.starchive__paper{
  position:absolute;
  height:auto;

}

.starchive__paper--back{
  width: 280px;
  left: 10px;
  top: 24px;
  filter: saturate(.95);
  transform: rotate(-4deg);
}

.starchive__paper--front{
  width: 320px;
  right: 0;
  top: 0;
  transform: rotate(6deg);
}

/* responsive */
@media (max-width:980px){
  .starchive__layout{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .starchive__right{ order: 2; }
  .starchive__collage{ height: 320px; }
  .starchive__paper--back{ left: 18px; }
  .starchive__paper--front{ right: 18px; }
}

@media (max-width:520px){
  .starchive__controls{ gap: 12px; }
  .starchive__select{ min-width: 96px; }
  .starchive__cta{ width: 100%; justify-content:center;margin-top:10px; }
  .starchive__paper.starchive__paper--back {
    width: 60%;
    left: 5px;
    transform: rotate(-3deg);
    top: 2px;
    }

   .starchive__paper.starchive__paper--front {
    width: 66%;
    transform: rotate(3deg);
    right: 0px;
    }
}

.starchive__head.center {
    margin-bottom: 22px;
}

/* =========================================================
   5) FUN MOTION (paired with journey.js)
========================================================= */
.milestones,
.identity,
.starchive{
  opacity: 1;
  transform: none;
}
.ms-slide--final{
  text-align:left;
}
.ms-slide--final .ms-year{
  color:#B00000;
}

/* Finale fade effect */
.milestones--end .milestones__nav{
  opacity:.35;
  transform: translateX(-6px);
  transition: opacity .5s ease, transform .5s ease;
}

.milestones--end .milestones__nav::before{
  opacity:.2;
}

/* keep active year visible */
.milestones--end .era-btn.is-active{
  opacity:1;
}
/* reveal when JS adds .is-inview */
.milestones.is-inview,
.identity.is-inview,
.starchive.is-inview{
  animation: journeyReveal .55s ease both;
}

@keyframes journeyReveal{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* subtle float for starchive collage */
@media (hover:hover) and (pointer:fine){
  .starchive__paper--front{
    animation: floatFront 4.8s ease-in-out infinite;
  }
  .starchive__paper--back{
    animation: floatBack 6.2s ease-in-out infinite;
  }
}

@keyframes floatFront{
  0%,100%{ transform: rotate(6deg) translateY(0); }
  50%{ transform: rotate(6deg) translateY(-6px); }
}
@keyframes floatBack{
  0%,100%{ transform: rotate(-4deg) translateY(0); }
  50%{ transform: rotate(-4deg) translateY(5px); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-gradient-bg{ animation:none; }
  .milestones.is-inview,
  .identity.is-inview,
  .starchive.is-inview{ animation:none; }

  .starchive__paper--front,
  .starchive__paper--back{ animation:none !important; }
}