/* ============================================================
   NutriTech — launch intro overlay ("We're live")
   Cinematic app-icon reveal. Modular + removable:
   delete this file, js/intro.js, the #nt-intro markup and the
   two <link>/<script> tags in index.html to take it down.

   SPEED: change --nt-speed below. 1 = original speed,
   2 = half speed, 3 = a third speed. js/intro.js reads it too.
   ============================================================ */

/* Hidden by default — only shown once js/intro.js opts in.
   If JS is disabled or errors, the site shows normally. */
#nt-intro {
  display: none;
  --nt-speed: 2;   /* 1 = original, 2 = half speed */
}

/* Lock scroll on the page underneath while the intro plays. */
body.nt-lock { overflow: hidden; }

#nt-intro.nt-run {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 6vh 1.4rem;
  background:
    radial-gradient(120% 90% at 50% 42%, #0a1119 0%, #06090f 55%, #04060a 100%);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  -webkit-font-smoothing: antialiased;
}

/* dismiss */
#nt-intro.nt-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- blooming radial glow behind the tile ---- */
.nt-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(760px, 130vw);
  height: min(760px, 130vw);
  transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(closest-side,
              rgba(0, 230, 118, 0.30),
              rgba(0, 230, 118, 0.10) 45%,
              transparent 72%);
  filter: blur(14px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.nt-run .nt-glow {
  animation: nt-glow-bloom calc(2.6s * var(--nt-speed))
             cubic-bezier(.16,.8,.3,1) calc(0.05s * var(--nt-speed)) forwards;
}

/* faint drifting circuit sparks */
.nt-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green, #00e676);
  box-shadow: 0 0 10px 2px rgba(0, 230, 118, 0.7);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.nt-run .nt-spark { animation: nt-spark calc(2.4s * var(--nt-speed)) ease-in-out forwards; }

/* ---- centered stack ---- */
.nt-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
}

/* ---- app-icon tile ---- */
.nt-tile {
  position: relative;
  width: clamp(150px, 34vw, 208px);
  aspect-ratio: 1;
  margin-bottom: 2.1rem;
  opacity: 0;
  transform: scale(0.82);
  will-change: transform, opacity;
}
.nt-run .nt-tile {
  animation: nt-tile-in calc(1.05s * var(--nt-speed))
             cubic-bezier(.2,.9,.25,1.15) calc(0.15s * var(--nt-speed)) forwards;
}

.nt-tile-inner {
  position: absolute;
  inset: 0;
  border-radius: 24%;
  overflow: hidden;
  background: #05070b;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 230, 118, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* glossy top highlight on the glass tile */
.nt-tile-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
              rgba(255, 255, 255, 0.14) 0%,
              rgba(255, 255, 255, 0.02) 22%,
              transparent 50%);
  z-index: 4;
  pointer-events: none;
}

.nt-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dormant underlay — dim, desaturated */
.nt-logo-dim { filter: brightness(0.34) saturate(0.55); z-index: 1; }

/* bright glowing copy, revealed bottom→top as it "lights up" */
.nt-logo-fill {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(100% 0 0 0);
}
.nt-run .nt-logo-fill {
  animation: nt-fill calc(1.5s * var(--nt-speed))
             cubic-bezier(.5,0,.1,1) calc(0.55s * var(--nt-speed)) forwards;
}
.nt-logo-fill .nt-logo {
  filter: brightness(1.12) saturate(1.15)
          drop-shadow(0 0 14px rgba(0, 230, 118, 0.55));
}

/* diagonal shine sweep */
.nt-shine {
  position: absolute;
  top: -60%;
  left: -75%;
  width: 55%;
  height: 220%;
  z-index: 5;
  transform: rotate(18deg) translateX(0);
  background: linear-gradient(90deg,
              transparent, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0;
  pointer-events: none;
}
.nt-run .nt-shine {
  animation: nt-shine calc(1.15s * var(--nt-speed))
             cubic-bezier(.35,0,.2,1) calc(1.05s * var(--nt-speed)) forwards;
}

/* pulsing glow ring at full reveal */
.nt-ring {
  position: absolute;
  inset: -6px;
  border-radius: 27%;
  z-index: 0;
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5);
  opacity: 0;
  pointer-events: none;
}
.nt-run .nt-ring {
  animation: nt-ring calc(1.5s * var(--nt-speed)) ease-out calc(1.6s * var(--nt-speed)) forwards;
}

/* ---- copy ---- */
.nt-eyebrow,
.nt-title,
.nt-sub,
.nt-badge,
.nt-skip {
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}
.nt-run .nt-eyebrow { animation: nt-rise calc(0.7s * var(--nt-speed)) ease-out calc(1.5s * var(--nt-speed)) forwards; }
.nt-run .nt-title   { animation: nt-rise calc(0.8s * var(--nt-speed)) cubic-bezier(.2,.7,.2,1) calc(1.68s * var(--nt-speed)) forwards; }
.nt-run .nt-sub     { animation: nt-rise calc(0.7s * var(--nt-speed)) ease-out calc(1.95s * var(--nt-speed)) forwards; }
.nt-run .nt-badge   { animation: nt-rise calc(0.7s * var(--nt-speed)) ease-out calc(2.25s * var(--nt-speed)) forwards; }
.nt-run .nt-skip    { animation: nt-rise calc(0.7s * var(--nt-speed)) ease-out calc(2.7s * var(--nt-speed)) forwards; }

.nt-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green, #00e676);
  margin: 0 0 0.85rem;
  padding-left: 0.32em; /* optically balance the tracking */
}
.nt-title {
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  background: linear-gradient(100deg, #e8d44d, #7fdc6a 52%, #00e676);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nt-sub {
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: #96a0b5;
  margin: 1rem 0 2rem;
  max-width: 30ch;
  line-height: 1.5;
}

/* ---- App Store badge ---- */
.nt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  padding: 0.6rem 1.35rem 0.62rem;
  text-decoration: none;
  color: #fff;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.nt-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 230, 118, 0.6);
  box-shadow: 0 10px 30px rgba(0, 230, 118, 0.22);
}
.nt-badge svg { width: 24px; height: 24px; fill: #fff; flex: none; }
.nt-badge span { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.nt-badge small { font-size: 0.62rem; font-weight: 500; opacity: 0.9; letter-spacing: 0.01em; }
.nt-badge b { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---- skip / enter ---- */
.nt-skip {
  margin-top: 1.8rem;
  background: none;
  border: none;
  color: #5c6575;
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nt-skip:hover { color: #f2f5f9; }

/* ============ keyframes ============ */
@keyframes nt-glow-bloom {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.3); }
  55%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
}
@keyframes nt-tile-in {
  0%   { opacity: 0; transform: scale(0.82); }
  70%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes nt-fill {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes nt-shine {
  0%   { opacity: 0;   transform: rotate(18deg) translateX(0); }
  12%  { opacity: 0.9; }
  100% { opacity: 0;   transform: rotate(18deg) translateX(420%); }
}
@keyframes nt-ring {
  0%   { opacity: 0.9; box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.55); }
  100% { opacity: 0;   box-shadow: 0 0 0 34px rgba(0, 230, 118, 0); }
}
@keyframes nt-rise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes nt-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -60px)) scale(1); }
}

/* ============ reduced motion: show the end-state, no motion ============ */
@media (prefers-reduced-motion: reduce) {
  #nt-intro.nt-run * { animation: none !important; }
  .nt-glow      { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  .nt-tile      { opacity: 1; transform: none; }
  .nt-logo-fill { clip-path: inset(0 0 0 0); }
  .nt-eyebrow, .nt-title, .nt-sub, .nt-badge, .nt-skip { opacity: 1; transform: none; }
  .nt-shine, .nt-spark, .nt-ring { display: none; }
}

/* ============ small screens ============ */
@media (max-width: 420px) {
  .nt-sub { margin-bottom: 1.6rem; }
  .nt-tile { margin-bottom: 1.7rem; }
}

/* ============ short / landscape viewports: keep the whole stack on screen ============ */
@media (max-height: 680px) {
  #nt-intro.nt-run { padding: 3vh 1.4rem; align-items: center; overflow-y: auto; }
  .nt-tile { width: clamp(104px, 22vh, 168px); margin-bottom: 1.2rem; }
  .nt-glow { top: 50%; }
  .nt-eyebrow { margin-bottom: 0.55rem; }
  .nt-title { font-size: clamp(2rem, 6.5vh, 3.2rem); }
  .nt-sub { font-size: 1rem; margin: 0.6rem 0 1.2rem; }
  .nt-skip { margin-top: 1.1rem; }
}
@media (max-height: 460px) {
  .nt-tile { width: clamp(84px, 26vh, 120px); margin-bottom: 0.9rem; }
  .nt-sub { display: none; } /* drop the least-critical line when truly cramped */
  .nt-skip { margin-top: 0.8rem; }
}