/* Digging Deep page (/digging-deep/). Visual refresh 2026-10-09: soil-and-gold ground, flat buttons, gameplay in
   the first screen, plain "How it plays" columns. Tokens, header, footer and frames come from studio.css.
   The easter eggs (tappable mascot and blocks, falling dirt, depth counter) are unchanged. */

/* ── FALLING DIRT AND DIAMONDS (canvas) ── */
#particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

section { padding: clamp(2.75rem, 6vw, 4.5rem) var(--gutter); position: relative; }

.section-title {
  max-width: 1100px;
  margin: 0 auto 2rem;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--paper);
}

/* ── HERO: copy beside the gameplay loop ── */
.hero { padding-block: clamp(3rem, 7vw, 5rem); }
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 260px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero-mascot {
  width: 120px;
  height: 120px;
  border-radius: 26px;
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html.js .hero-mascot {
  animation: mascotBounce 2s ease-in-out infinite;
}

.hero-mascot:active {
  transform: scale(0.9);
}

.hero-mascot.tapped {
  animation: mascotTap 0.3s ease-out;
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

@keyframes mascotTap {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(0.85) rotate(-8deg); }
  60% { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  color: var(--gold);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 1.25rem 0 0.4rem;
}

.hero-subtitle {
  font-family: var(--font-label);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.hero-tagline { font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 600; margin: 1rem 0 1.75rem; max-width: 30rem; }

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--ink-on-gold);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.cta-button:hover { background: var(--gold-hi); }
.cta-button svg { width: 20px; height: 20px; flex-shrink: 0; }

.hero-since { margin-top: 1rem; font-size: 0.9rem; color: var(--paper-dim); }

/* ── HOW IT PLAYS: three plain columns ── */
.how-grid {
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.how-grid li { border-top: 2px solid var(--seam-hi); padding-top: 1.1rem; }
.how-grid h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.how-grid p { color: var(--paper-dim); }

/* ── GAMEPLAY CAROUSEL ── */
.screenshots-section { overflow: hidden; }
.screenshots-track-wrapper {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.screenshots-track { display: flex; gap: 1.25rem; width: max-content; }
html.js .screenshots-track {
  animation: scrollTrack 30s linear infinite;
}

html.js .screenshots-track:hover {
  animation-play-state: paused;
}

@keyframes scrollTrack {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.screenshot-card {
  flex-shrink: 0;
  width: 240px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.screenshot-card img { width: 100%; height: auto; display: block; }

/* ── TRAILER ── */
.trailer-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.trailer-wrapper::before { content: ''; display: block; padding-top: 56.25%; }
.trailer-wrapper iframe,
.trailer-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.trailer-wrapper video { background: #000; object-fit: contain; }

/* ── ACHIEVEMENTS ── */
.achievements-section { text-align: center; }
.achievements-section .section-title { text-align: left; }
.achievements-strip {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}
.ach-badge { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; transition: transform 0.2s; }
html.js .ach-badge {
  opacity: 0;
  animation: badgePop 0.4s ease-out forwards;
}

.ach-badge:hover {
  transform: scale(1.2) rotate(5deg);
}

.ach-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes badgePop {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.achievements-caption {
  font-family: var(--font-label);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: 1.5rem;
}

/* ── LAST CALL ── */
.cta-banner { text-align: center; }
.cta-banner .section-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 0.75rem;
}
.cta-banner p { color: var(--paper-dim); margin-bottom: 1.75rem; font-size: 1.1rem; }

/* ── DEPTH COUNTER ── */
.depth-counter {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-family: var(--font-label);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  writing-mode: vertical-lr;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.depth-counter.visible { opacity: 0.8; }

/* ── TAPPABLE BLOCKS (easter egg) ── */
.tap-block {
  position: fixed;
  width: 48px;
  height: 48px;
  border-radius: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 28L16 18L20 14L28 6' stroke='%238B6914' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M25 3L29 7L20 16L16 12Z' fill='%23888'/%3E%3Cpath d='M26 2L30 6' stroke='%23AAA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 4 28, pointer;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  /* Dirt block texture via layered gradients */
  background:
    /* Top bevel highlight */
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 20%),
    /* Left bevel highlight */
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 15%),
    /* Bottom shadow edge */
    linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 20%),
    /* Right shadow edge */
    linear-gradient(270deg, rgba(0,0,0,0.2) 0%, transparent 15%),
    /* Pixel dirt texture pattern */
    repeating-conic-gradient(
      rgba(139,105,20,0.4) 0% 25%, transparent 0% 50%
    ) 0 0 / 8px 8px,
    /* Base dirt color */
    linear-gradient(180deg, #A0782C 0%, #7A5C1F 50%, #6B4423 100%);
  /* Opaque fallback: the fill above is one multi-layer shorthand, so an engine that
     rejects a single layer (iOS Safari + repeating-conic-gradient) drops all of it and
     leaves a see-through square floating over the copy. Keep this after the shorthand. */
  background-color: #7A5C1F;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -2px 0 rgba(0,0,0,0.3),
    inset 1px 0 0 rgba(255,255,255,0.1),
    inset -1px 0 0 rgba(0,0,0,0.2),
    0 3px 8px rgba(0,0,0,0.5);
  image-rendering: pixelated;
}

.tap-block[data-variant="stone"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 20%),
    linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 15%),
    linear-gradient(0deg, rgba(0,0,0,0.35) 0%, transparent 20%),
    linear-gradient(270deg, rgba(0,0,0,0.25) 0%, transparent 15%),
    repeating-conic-gradient(
      rgba(100,100,100,0.3) 0% 25%, transparent 0% 50%
    ) 0 0 / 8px 8px,
    linear-gradient(180deg, #777 0%, #555 50%, #444 100%);
  background-color: #555;
}

.tap-block[data-variant="gold"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 20%),
    linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 15%),
    linear-gradient(0deg, rgba(0,0,0,0.25) 0%, transparent 20%),
    linear-gradient(270deg, rgba(0,0,0,0.15) 0%, transparent 15%),
    repeating-conic-gradient(
      rgba(255,200,40,0.3) 0% 25%, transparent 0% 50%
    ) 0 0 / 8px 8px,
    linear-gradient(180deg, #D4A520 0%, #B8860B 50%, #8B6914 100%);
  background-color: #B8860B;
}

/* Crack overlay via pseudo-element */
.tap-block::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.tap-block.crack-1::after {
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 8L22 18L26 22L20 28' stroke='rgba(0,0,0,0.5)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 8L22 18L26 22L20 28' stroke='rgba(255,255,255,0.15)' stroke-width='1' fill='none' stroke-linecap='round' transform='translate(1,1)'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tap-block.crack-2::after {
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 6L20 16L26 20L18 30L22 36M24 20L32 24L28 32M16 14L12 20' stroke='rgba(0,0,0,0.6)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 6L20 16L26 20L18 30L22 36M24 20L32 24L28 32M16 14L12 20' stroke='rgba(255,255,255,0.12)' stroke-width='1' fill='none' stroke-linecap='round' transform='translate(1,1)'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tap-block.active {
  opacity: 1;
  pointer-events: auto;
  animation: blockDropIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.js .tap-block.active:not(.crack-1):not(.crack-2):not(.smashed) {
  animation: blockDropIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), blockWobble 2.5s ease-in-out 0.5s infinite;
}

@keyframes blockDropIn {
  0% { transform: translateY(-60px) scale(0.5); opacity: 0; }
  60% { transform: translateY(8px) scale(1.05); opacity: 1; }
  80% { transform: translateY(-3px) scale(0.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes blockWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

.tap-block.hit {
  animation: blockHit 0.15s ease-out;
}

@keyframes blockHit {
  0% { transform: scale(1); }
  50% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.tap-block.smashed {
  animation: blockSmash 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes blockSmash {
  0% { transform: scale(1); opacity: 1; }
  20% { transform: scale(1.15); }
  100% { transform: scale(0) rotate(45deg); opacity: 0; }
}

/* ── BLOCK DEBRIS ── */
.block-debris {
  position: fixed;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 6;
  image-rendering: pixelated;
  animation: debrisFly 0.6s ease-out forwards;
}

@keyframes debrisFly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ── DIAMOND BURST (on block tap) ── */
.diamond-burst {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  font-size: 1.5rem;
  animation: diamondFly 0.8s ease-out forwards;
}

@keyframes diamondFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ── SCROLL REVEAL (JS-only) ── */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-gameplay { width: min(62vw, 240px); }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .hero-mascot { width: 96px; height: 96px; border-radius: 22px; }
  .screenshot-card { width: 180px; }
  .depth-counter { display: none; }
  .ach-badge { width: 48px; height: 48px; }
}

@media (max-width: 480px) {
  .cta-button { width: 100%; }
  .screenshot-card { width: 150px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .screenshots-track { animation: none !important; }
  html.js .reveal,
  html.js .ach-badge {
    opacity: 1 !important;
    transform: none !important;
  }
  .tap-block.active { animation: none !important; opacity: 1; }
  .block-debris { animation: none !important; opacity: 0; }
}