/* Scrematrice Premium — HOMEPAGE styles
 * Editorial hero, showcase grid, scroll story, campaign, press marquee
 */

/* ====== HERO ====== */
.scr-hero {
  position: relative;
  overflow: hidden;
  background: var(--scr-cream);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(40px, 8vw, 80px) 0 clamp(48px, 10vw, 120px);
}
.scr-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.scr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.scr-hero-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--scr-pink);
  box-shadow: 0 0 0 4px rgba(190, 24, 93, 0.15);
  animation: scr-pulse 2.4s var(--scr-ease-smooth) infinite;
}
@keyframes scr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.scr-hero-title {
  font-family: var(--scr-font-display);
  font-weight: 400;
  font-size: var(--scr-text-hero);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--scr-ink);
  max-width: 18ch;
  margin: 0 0 32px;
}
.scr-hero-title span { display: block; }
.scr-hero-italic { font-style: italic; color: var(--scr-pink); }

.scr-hero-sub {
  font-size: clamp(17px, 2.5vw, 21px);
  line-height: 1.5;
  color: var(--scr-ink-soft);
  max-width: 540px;
  margin: 0 0 40px;
}

.scr-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 72px;
}

.scr-hero-proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
  max-width: 640px;
  padding-top: 40px;
  border-top: 1px solid var(--scr-hairline);
}
@media (min-width: 768px) {
  .scr-hero-proof { grid-template-columns: repeat(4, 1fr); }
}
.scr-hero-proof-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scr-hero-proof-num {
  font-family: var(--scr-font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  color: var(--scr-ink);
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}
.scr-hero-proof-lbl {
  font-family: var(--scr-font-body);
  font-size: 12px;
  color: var(--scr-ink-muted);
  letter-spacing: 0.03em;
}

.scr-hero-wordmark-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8%;
  z-index: 1;
  pointer-events: none;
  text-align: center;
  opacity: 0.06;
  line-height: 0.7;
}
.scr-kinetic-wordmark {
  font-family: var(--scr-font-display);
  font-size: 42vw;
  font-style: italic;
  color: var(--scr-pink-dark);
  letter-spacing: -0.06em;
  white-space: nowrap;
  display: inline-block;
  transform: translateY(calc(var(--kn, 0) * -8%));
  transition: transform 600ms var(--scr-ease-cinematic);
}

/* ====== TICKER STRIP ====== */
.scr-ticker-strip {
  background: var(--scr-ink);
  color: var(--scr-cream);
  overflow: hidden;
  border-top: 1px solid var(--scr-hairline);
  border-bottom: 1px solid var(--scr-hairline);
}
.scr-ticker {
  padding: 14px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.scr-ticker-track {
  display: inline-flex;
  gap: 32px;
  white-space: nowrap;
  animation: scr-ticker 40s linear infinite;
  font-family: var(--scr-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--scr-cream);
}
.scr-ticker-track span {
  display: inline-block;
  opacity: 0.75;
}
@keyframes scr-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ====== SECTION HEADS ====== */
.scr-section-head {
  margin-bottom: 56px;
  max-width: 640px;
}
.scr-section-head .scr-label {
  display: block;
  margin-bottom: 12px;
}
.scr-section-title {
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--scr-ink);
}
.scr-section-title em {
  font-style: italic;
  color: var(--scr-pink);
}
.scr-section-sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--scr-ink-soft);
  max-width: 560px;
}

/* ====== PRODUCT GRID ====== */
.scr-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .scr-product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1280px) {
  .scr-product-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
}
.scr-product-card {
  display: flex;
  flex-direction: column;
  background: var(--scr-paper);
  border: 1px solid var(--scr-hairline);
  border-radius: var(--scr-r-md);
  overflow: hidden;
  color: var(--scr-ink);
  transition:
    transform 400ms var(--scr-ease-cinematic),
    border-color var(--scr-d-base) var(--scr-ease-out-quart),
    box-shadow var(--scr-d-base) var(--scr-ease-out-quart);
}
.scr-product-card:hover {
  transform: translateY(-4px);
  border-color: var(--scr-hairline-strong);
  box-shadow: var(--scr-elev-2);
  color: var(--scr-ink);
}
.scr-product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--scr-cream-deep);
}
.scr-product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 800ms var(--scr-ease-cinematic);
}
.scr-product-card:hover .scr-product-card-media img {
  transform: scale(1.04);
}
.scr-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--scr-ink);
  color: var(--scr-paper);
  font-family: var(--scr-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--scr-r-full);
  font-weight: 500;
}
.scr-product-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.scr-product-card-sku { margin-bottom: 2px; }
.scr-product-card-name {
  font-family: var(--scr-font-display);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.15;
  margin: 0;
  color: var(--scr-ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.scr-product-card-tag {
  font-size: 12.5px;
  color: var(--scr-ink-muted);
  line-height: 1.4;
  margin: 2px 0 0;
}
.scr-product-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--scr-hairline);
}
.scr-product-card-foot .scr-price {
  font-size: 14px;
}
.scr-product-card-cta {
  font-family: var(--scr-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--scr-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--scr-d-fast);
}
.scr-product-card:hover .scr-product-card-cta {
  color: var(--scr-pink);
}

/* ====== WHY (3 kart) ====== */
.scr-why { background: var(--scr-cream-deep); }
.scr-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .scr-why-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.scr-why-card {
  background: var(--scr-paper);
  padding: 40px 32px;
  border-radius: var(--scr-r-md);
  border: 1px solid var(--scr-hairline);
  position: relative;
}
.scr-why-num {
  display: block;
  font-family: var(--scr-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--scr-pink);
  margin-bottom: 24px;
}
.scr-why-card h3 {
  font-family: var(--scr-font-display);
  font-size: 28px;
  margin: 0 0 12px;
  color: var(--scr-ink);
  font-weight: 400;
  line-height: 1.1;
}
.scr-why-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--scr-ink-soft);
  margin: 0;
}

/* ====== STORY PANELS ====== */
.scr-story-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.scr-story-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .scr-story-panel {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
  }
  .scr-story-panel:nth-child(even) {
    grid-template-columns: 7fr 5fr;
  }
  .scr-story-panel:nth-child(even) .scr-story-body { order: -1; }
}
.scr-story-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--scr-r-md);
  background: var(--scr-cream-deep);
}
.scr-story-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.scr-story-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scr-story-step {
  color: var(--scr-pink) !important;
}
.scr-story-title {
  font-family: var(--scr-font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--scr-ink);
  font-weight: 400;
}
.scr-story-text {
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.6;
  color: var(--scr-ink-soft);
  max-width: 52ch;
  margin: 0;
}
.scr-story-body .scr-btn {
  align-self: flex-start;
  margin-top: 8px;
}

/* ====== CAMPAIGN ====== */
.scr-campaign {
  background: var(--scr-ink);
  color: var(--scr-cream);
  padding: clamp(80px, 12vw, 160px) 0;
  margin: clamp(80px, 12vw, 128px) 0;
  overflow: hidden;
  position: relative;
}
.scr-campaign::after {
  content: "scrematrice";
  position: absolute;
  right: -5%;
  top: -40px;
  font-family: var(--scr-font-display);
  font-style: italic;
  font-size: 36vw;
  line-height: 0.7;
  color: var(--scr-pink);
  opacity: 0.08;
  pointer-events: none;
  letter-spacing: -0.06em;
}
.scr-campaign-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--scr-page-px);
  position: relative;
  z-index: 2;
}
.scr-campaign-copy .scr-label {
  color: var(--scr-pink-blush);
}
.scr-campaign-title {
  font-family: var(--scr-font-display);
  font-size: clamp(36px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--scr-cream);
  font-weight: 400;
  margin: 16px 0 24px;
  max-width: 18ch;
}
.scr-campaign-title em {
  font-style: italic;
  color: var(--scr-pink-blush);
}
.scr-campaign-body {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: rgba(250, 246, 238, 0.78);
  max-width: 52ch;
  margin: 0;
}

/* ====== PRESS MARQUEE ====== */
.scr-press {
  padding: clamp(64px, 10vw, 96px) 0 clamp(32px, 4vw, 48px);
}
.scr-press-lbl {
  display: inline-block;
  margin-bottom: 24px;
}
.scr-press-marquee {
  overflow: hidden;
  border-top: 1px solid var(--scr-hairline);
  border-bottom: 1px solid var(--scr-hairline);
  padding: 24px 0;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.scr-press-track {
  display: inline-flex;
  gap: 40px;
  white-space: nowrap;
  animation: scr-ticker 60s linear infinite;
  align-items: center;
}
.scr-press-quote {
  font-family: var(--scr-font-display);
  font-size: clamp(18px, 2.5vw, 26px);
  font-style: italic;
  color: var(--scr-ink);
  display: inline-block;
}
.scr-press-quote em {
  font-family: var(--scr-font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scr-ink-muted);
  margin-left: 12px;
}
.scr-press-dot {
  color: var(--scr-pink);
  font-size: 10px;
  opacity: 0.6;
}

/* ====== ROUTINE TEASER ====== */
.scr-routine-teaser { background: var(--scr-cream-deep); }
.scr-routine-card {
  background: var(--scr-paper);
  padding: clamp(40px, 6vw, 72px);
  border-radius: var(--scr-r-lg);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--scr-hairline);
}
.scr-routine-card .scr-label { color: var(--scr-pink); }
.scr-routine-title {
  font-family: var(--scr-font-display);
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 12px 0 16px;
  font-weight: 400;
  color: var(--scr-ink);
}
.scr-routine-title em { font-style: italic; color: var(--scr-pink); }
.scr-routine-card p {
  font-size: clamp(15.5px, 2vw, 18px);
  color: var(--scr-ink-soft);
  margin: 0 auto 28px;
  max-width: 520px;
  line-height: 1.55;
}

/* ====== RESPONSIVE TIGHTENINGS ====== */
@media (max-width: 640px) {
  .scr-hero-title { font-size: clamp(44px, 12vw, 64px); max-width: 14ch; }
  .scr-hero-sub { font-size: 16px; }
  .scr-hero-ctas { flex-direction: column; align-items: stretch; }
  .scr-hero-ctas .scr-btn { width: 100%; }
  .scr-section-title { font-size: clamp(30px, 8vw, 42px); }
  .scr-campaign-title { font-size: clamp(30px, 9vw, 48px); }
  .scr-story-list { gap: 64px; }
}