/* =========================================
   Home page redesign — loads after styles.css
   and only affects index.html
========================================= */
:root {
  --ink: #343434;
  --slate: #344e65;
  --belize: #60c2ed;
  --wisteria: #b87eff;
  --mint: #54eaa4;
  --canary: #f9e552;
  --tangerine: #f6ba67;
  --rose: #ff7ea5;

  --belize-t: #eaf7fd;
  --wisteria-t: #f6eeff;
  --mint-t: #eafcf4;
  --canary-t: #fffbdc;
  --tangerine-t: #fdf1e0;
  --rose-t: #ffedf3;

  --belize-d: #1f7fae;
  --wisteria-d: #7a3fd0;
  --mint-d: #158a5a;
  --canary-d: #8a7a00;
  --tangerine-d: #b0741f;
  --rose-d: #d94f7e;
}

section[id] {
  scroll-margin-top: 95px;
}

/* =========================================
   Hero
========================================= */
#hero-banner {
  background: url('../images/banner/holo.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px 0;
  min-height: 0;
}

#hero-banner .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(30px, 5vw, 70px);
  max-width: 1150px;
  margin: 0 auto;
  padding: 30px 30px 40px;
}

#hero-banner .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 1 1 55%;
}

#hero-banner h1.hero-wordmark {
  font-size: clamp(64px, 8vw, 96px);
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

#hero-banner p.hero-tagline {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.9vw, 36px);
  line-height: 1.5;
  color: var(--ink);
  margin: 18px 0 0;
  padding: 0;
  text-align: left;
  white-space: nowrap;
}

/* cycling word chip */
.spin {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.8em;
  width: 9.6em;
  vertical-align: middle;
  margin-top: -0.12em;
}
.spin-track {
  display: flex;
  flex-direction: column;
  animation: spin-words 12.5s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
.spin-track > span {
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
}
.spin-track .chip {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1.3;
  padding: 0.08em 0.6em 0.14em;
  border-radius: 999px;
  white-space: nowrap;
}
/* chip colors mirror app colors */
.chip-slate {
  background: var(--slate);
  color: #fff;
}
.chip-movie {
  background: #fff4d7;
  color: #8a6410;
  border: 2px solid #8a6410;
}
.chip-weather {
  background: #d7e0ff;
  color: #1f5a94;
  border: 2px solid #1f5a94;
}
.chip-secret {
  background: #e4d7ff;
  color: #702cb3;
  border: 2px solid #702cb3;
}
.chip-song {
  background: #ffd7e5;
  color: #b32c55;
  border: 2px solid #b32c55;
}

@keyframes spin-words {
  0%,
  14% {
    transform: translateY(0);
  }
  16.6%,
  30.7% {
    transform: translateY(-16.6667%);
  }
  33.3%,
  47.4% {
    transform: translateY(-33.3333%);
  }
  50%,
  64% {
    transform: translateY(-50%);
  }
  66.6%,
  80.7% {
    transform: translateY(-66.6667%);
  }
  83.3%,
  98% {
    transform: translateY(-83.3333%);
  }
  100% {
    transform: translateY(-83.3333%);
  }
}

#hero-banner p.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: #46566b;
  max-width: 520px;
  margin: 18px 0 34px;
  padding: 0;
  text-align: left;
}

#hero-banner .realrow {
  justify-content: flex-start;
  margin-bottom: 8px;
}
#hero-banner .realrow a:hover {
  margin: 0;
  display: block;
}

/* hero graphic */
.hero-collage {
  position: relative;
  flex: 0 0 auto;
  width: min(510px, 42vw);
  height: min(560px, 46vw);
  align-self: center;
  margin-top: 46px;
}
.hero-collage img {
  position: absolute;
  height: auto;
}
.hc-phone {
  width: 76%;
  top: 6%;
  left: 12%;
  z-index: 1;
}
.hc-weather {
  width: 44%;
  top: 2%;
  left: 63%;
  z-index: 2;
}
.hc-tv {
  width: 42%;
  top: 48%;
  left: 62%;
  z-index: 2;
}
.hc-image {
  width: 42%;
  top: 26%;
  left: -2%;
  z-index: 2;
}
.hc-music {
  width: 46%;
  top: 70%;
  left: 8%;
  z-index: 3;
}

/* hero emojis */
.hc-emoji {
  position: absolute;
  font-size: clamp(26px, 3.4vw, 42px);
  z-index: 2;
}
.hc-e1 {
  top: 5%;
  left: 10%;
  transform: rotate(-12deg);
}
.hc-e2 {
  top: 1%;
  left: 46%;
  font-size: clamp(20px, 2.7vw, 33px);
}
.hc-e3 {
  top: 93%;
  left: 60%;
  transform: rotate(10deg);
}
.hc-e4 {
  top: 76%;
  left: 88%;
  transform: rotate(-8deg);
}
.hc-e5 {
  top: 31%;
  left: 90%;
}
.hc-e6 {
  top: 62%;
  left: -6%;
  transform: rotate(8deg);
  font-size: clamp(22px, 3vw, 36px);
}

/* =========================================
   Post element scroll
========================================= */
#post-element-scroll {
  position: relative;
  background: #fff;
  padding: 23px 0 54px;
  overflow: hidden;
}
.post-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.post-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding-left: 14px;
  animation: post-scroll 60s linear infinite;
}
.post-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #1c1c1e;
  border: 2px solid;
  border-radius: 999px;
  padding: 9px 22px 9px 16px;
  box-shadow: 0 4px 14px rgba(52, 78, 101, 0.1);
  white-space: nowrap;
}
.post-ico {
  width: 22px;
  height: 22px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.ico-movie {
  --ico: url('../images/icons/popcorn.svg');
}
.ico-book {
  --ico: url('../images/icons/book.svg');
}
.ico-song {
  --ico: url('../images/icons/music.svg');
}
.ico-photos {
  --ico: url('../images/icons/image.svg');
}
.ico-weather {
  --ico: url('../images/icons/cloud.svg');
}
.ico-secret {
  --ico: url('../images/icons/eye.svg');
}
.pill-movie {
  background: #fff4d7;
  border-color: #8a6410;
}
.pill-movie .post-ico {
  background-color: #8a6410;
}
.pill-book {
  background: #d7f8ff;
  border-color: #12707a;
}
.pill-book .post-ico {
  background-color: #12707a;
}
.pill-song {
  background: #ffd7e5;
  border-color: #b32c55;
}
.pill-song .post-ico {
  background-color: #b32c55;
}
.pill-photos {
  background: #d7ffe0;
  border-color: #0b731c;
}
.pill-photos .post-ico {
  background-color: #0b731c;
}
.pill-weather {
  background: #d7e0ff;
  border-color: #1f5a94;
}
.pill-weather .post-ico {
  background-color: #1f5a94;
}
.pill-secret {
  background: #e4d7ff;
  border-color: #702cb3;
}
.pill-secret .post-ico {
  background-color: #702cb3;
}
@keyframes post-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================================
   Features
========================================= */
#features {
  background: #fff;
  padding: 40px 0 55px;
}
.feature-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 7vw, 90px);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.feature-row.reverse {
  flex-direction: row-reverse;
}

.feature-media img {
  display: block;
  width: clamp(242px, 27.3vw, 300px);
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(52, 78, 101, 0.22));
}

.feature-media img.img-editor {
  width: clamp(310px, 34.7vw, 384px);
  max-width: 100%;
}

.feature-media-profiles {
  display: flex;
  align-items: flex-start;
}
.feature-media-profiles img {
  width: clamp(220px, 23.1vw, 278px);
}
.feature-media-profiles img + img {
  margin-left: -30px;
  margin-top: 44px;
}

.feature-copy {
  max-width: 440px;
}
.feature-copy h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
  text-transform: lowercase;
}
.feature-copy h2 em,
.home-title em,
#download h2 em {
  font-family: 'Petrona', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.2em;
  color: inherit;
}
.feature-copy p {
  font-size: 17px;
  line-height: 1.65;
  color: #55606c;
  margin: 0;
}

/* =========================================
   CTA
========================================= */
#download {
  background: url('../images/banner/holo.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px 24px;
  text-align: center;
  margin-top: 30px;
}
#download h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 38px);
  color: var(--ink);
  margin: 0 0 12px;
  text-transform: lowercase;
}
#download p {
  font-size: 17px;
  color: #46566b;
  margin: 0 0 34px;
}
#download .realrow a:hover {
  margin: 0;
  display: block;
}

/* =========================================
   Contact
========================================= */
#contact-us {
  padding: 90px 0 70px;
  background: #fff;
}
.home-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 38px);
  color: var(--ink);
  text-align: center;
  margin: 0 0 14px;
  text-transform: lowercase;
}
#contact-us .home-sub {
  font-size: 17px;
  line-height: 1.65;
  color: #55606c;
  text-align: center;
  max-width: 520px;
  margin: 0 auto 44px;
  padding: 0 20px;
}
.contact-cards {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  padding: 0 20px;
}
.contact-card {
  display: block;
  width: 290px;
  background: var(--belize-t);
  border: 2px solid var(--belize);
  border-radius: 22px;
  padding: 28px 28px 24px;
  text-align: center;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.contact-card + .contact-card {
  background: var(--wisteria-t);
  border-color: var(--wisteria);
}
.contact-card:hover,
.contact-card:focus {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(52, 78, 101, 0.18);
  text-decoration: none;
}
.contact-card .cc-emoji {
  display: block;
  font-size: 38px;
  margin-bottom: 12px;
}
.contact-card .cc-name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 6px;
}
.contact-card .cc-desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: #55606c;
}

/* =========================================
   Animations
========================================= */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms ease;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}
/* =========================================
   Accessibility & responsive
========================================= */
.anim-toggle {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #46566b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #b6c2cf;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 200ms ease;
}
.anim-toggle:hover,
.anim-toggle:focus-visible {
  opacity: 1;
}
.anim-toggle svg {
  fill: currentColor;
}
.anim-toggle .ico-play,
html.anim-paused .anim-toggle .ico-pause {
  display: none;
}
html.anim-paused .anim-toggle .ico-play {
  display: block;
}
html.anim-paused .spin-track,
html.anim-paused .post-track {
  animation-play-state: paused;
}

html.no-anim *,
html.no-anim *::before,
html.no-anim *::after {
  animation: none !important;
  transition: none !important;
}
html.no-anim .reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .spin-track,
  .post-track {
    animation: none !important;
  }
  .anim-toggle {
    display: none;
  }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .feature-media img,
  .contact-card {
    transition: none;
  }
}

@media only screen and (max-width: 940px) {
  #hero-banner .hero-inner {
    flex-direction: column;
    padding: 20px 24px 40px;
  }
  #hero-banner .hero-copy {
    align-items: center;
    text-align: center;
  }
  #hero-banner p.hero-tagline {
    text-align: center;
  }
  #hero-banner p.hero-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #hero-banner .realrow {
    justify-content: center;
  }
  .hero-collage {
    display: none;
  }
  .spin-track > span {
    justify-content: center;
  }
}

@media only screen and (max-width: 860px) {
  .feature-row,
  .feature-row.reverse {
    flex-direction: column;
    gap: 36px;
    padding: 0 24px;
    text-align: center;
  }
  .feature-copy p {
    margin: 0 auto;
  }
  .feature-media-profiles {
    justify-content: center;
  }
  #hero-banner p.hero-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .spin {
    margin-top: 0;
  }
}

@media only screen and (max-width: 480px) {
  .spin {
    width: 10em;
  }
  #hero-banner p.hero-sub {
    font-size: 16px;
  }
  .feature-media-profiles img {
    width: 44vw;
  }
  .feature-media-profiles img + img {
    margin-left: -20px;
  }
}