/* ==========================================================================
   shelly.guide — front page layer
   Loaded after site.css. Same v2 palette and card language as the guides,
   with the motion that a landing page can carry and a guide page should not.
   ========================================================================== */

/* --- 1. Masthead --------------------------------------------------------- */
/* Same compact navy gradient block as a guide hero, just wider. The rule that
   too much blue at the top is a defect applies here too — it stops well short
   of the fold and the cards start immediately underneath. */
.masthead {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--sg-navy) 0%, var(--sg-midnight) 100%);
  color: #fff;
  padding: 52px 0 56px;
}
@media (max-width: 700px) { .masthead { padding: 34px 0 38px; } }

/* Animated schematic trace — current finding its way through the block */
.masthead__trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.masthead__trace path {
  fill: none; stroke: var(--sg-sky); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: sg-draw 3.4s cubic-bezier(.4,0,.2,1) forwards;
}
.masthead__trace path:nth-of-type(2) { animation-delay: .35s; opacity: .55; }
.masthead__trace path:nth-of-type(3) { animation-delay: .7s;  opacity: .35; }
.masthead__trace circle.node { fill: var(--sg-sky); opacity: 0; animation: sg-node .5s ease forwards; }
.masthead__trace circle.node:nth-of-type(1) { animation-delay: 1.4s; }
.masthead__trace circle.node:nth-of-type(2) { animation-delay: 1.9s; }
.masthead__trace circle.node:nth-of-type(3) { animation-delay: 2.4s; }
.masthead__trace circle.pulse { fill: #fff; filter: drop-shadow(0 0 6px var(--sg-sky)); }

@keyframes sg-draw { to { stroke-dashoffset: 0; } }
@keyframes sg-node { from { opacity: 0; transform: scale(.2); } to { opacity: .9; transform: scale(1); } }

.masthead__inner { position: relative; z-index: 1; }
.masthead__inner > * { max-width: 780px; }
.masthead h1 {
  color: #fff; font-size: clamp(30px, 5.4vw, 48px); line-height: 1.08;
  margin: 0 0 22px; max-width: 18ch; text-wrap: balance;
}
.masthead h1 em { font-style: normal; color: var(--sg-sky); }
/* Frosted white rather than a tint of the navy behind it. At 10% white the
   field read as part of the gradient and people missed it; at 93% it reads as
   a field you can type in, which is what it opens. The blur is the reason it
   can carry that much white without looking like a slab pasted on top — the
   schematic trace stays faintly visible through it. Every colour is set
   outright, because a browser without backdrop-filter still gets the same
   near-opaque white and the same dark text. */
.probe {
  width: 100%; max-width: 540px; display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 6px 20px rgba(6,21,37,.22);
  border-radius: 11px; padding: 13px 15px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--sg-muted); text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.probe:hover {
  background: #fff; border-color: #fff;
  box-shadow: 0 8px 24px rgba(6,21,37,.28);
}
.probe svg { width: 18px; height: 18px; flex: none; color: var(--sg-navy); }
.probe span { flex: 1; }
.probe kbd {
  font-family: var(--sg-mono); font-size: 11px; color: var(--sg-muted);
  background: var(--sg-shell); border: 1px solid var(--sg-line);
  border-radius: 5px; padding: 3px 6px;
}


/* --- 2. Popular ---------------------------------------------------------- */
/* The whole front page below the masthead. Five pages, one grid, no carousel
   and no category bar: the sections already live in the menu, and offering
   them twice was what made the page read as cluttered. */
.popular { padding: 34px 0 20px; }
.popular__head { margin-bottom: 20px; }
.popular__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-blue); margin: 0 0 5px; }
.popular__title { font-size: clamp(21px, 2.4vw, 27px); margin: 0 0 5px; }
.popular__sub { margin: 0; font-size: 15px; color: var(--sg-muted); max-width: 56ch; }

/* One column on a phone, two on a tablet, three on a desktop. The spans are
   written against the item count rather than a fixed position, so a list of
   four or six keeps a full last row instead of leaving a hole where the sixth
   card would have been. */
.popular__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 620px) and (max-width: 999px) {
  .popular__grid { grid-template-columns: repeat(4, 1fr); }
  .popular__grid > * { grid-column: span 2; }
  /* One left over keeps its half of the row. Stretched across the full width
     its picture would be 627 px tall and dwarf the other four. */
}

@media (min-width: 1000px) {
  .popular__grid { grid-template-columns: repeat(6, 1fr); }
  .popular__grid > * { grid-column: span 2; }
  /* two left over on the last row — widen both to half */
  .popular__grid > *:nth-child(3n + 1):nth-last-child(2),
  .popular__grid > *:nth-child(3n + 1):nth-last-child(2) ~ * { grid-column: span 3; }
  /* One left over keeps its third of the row rather than stretching across it.
     A card that wide would crop its artwork down to a letterbox, and a gap at
     the end of the last row is the smaller fault. */
}

/* --- 3. Tiles ------------------------------------------------------------ */
.tile {
  display: flex; flex-direction: column; border: 1px solid var(--sg-line);
  border-radius: var(--sg-r); background: var(--sg-paper); box-shadow: var(--sg-shadow);
  overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* Hover is scoped to a.tile throughout: a tile with no destination gets no
   lift, no border colour and no arrow nudge, because hover reads as
   "clickable" and it is not. Nothing to switch off, nothing to keep in sync. */
a.tile:hover { border-color: var(--sg-blue); transform: translateY(-3px); box-shadow: var(--sg-shadow-lift); }

/* 3:2, the shape the card images are cut to, so every picture is shown whole.
   This was a fixed height while the cards carried drawings that could be
   composed around a crop; the photographs cannot, because the device fills the
   frame top to bottom and a fixed height would take its head and its feet. The
   price is that the two rows no longer share a baseline — the wider cards in
   the last row carry a taller picture — and that reads as a feature row rather
   than a fault. */
.tile__art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sg-tint); }
.tile__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
a.tile:hover .tile__art img { transform: scale(1.05); }
.tile__art::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--sg-blue); transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.2,.7,.2,1);
}
a.tile:hover .tile__art::after { transform: scaleX(1); }
.tile__no {
  position: absolute; top: 10px; left: 11px;
  font-family: var(--sg-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: rgba(18,42,79,.78); border-radius: 5px; padding: 3px 7px;
}

.tile__body { padding: 15px 18px 19px; display: flex; flex-direction: column; flex: 1; }
.tile__meta { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-blue); margin-bottom: 7px; }
.tile__meta i { font-style: normal; color: var(--sg-muted); }
.tile__title { font-size: 18px; font-weight: 800; line-height: 1.24; color: var(--sg-midnight); margin-bottom: 6px; letter-spacing: -.012em; }
.tile__desc { font-size: 14.5px; color: var(--sg-muted); line-height: 1.5; }
.tile__foot { margin-top: auto; padding-top: 13px; font-size: 13.5px; font-weight: 800; color: var(--sg-navy); display: flex; align-items: center; gap: 7px; }
.tile__foot span { transition: transform .2s ease; }
a.tile:hover .tile__foot span { transform: translateX(4px); }

/* A page that has not been written yet still gets its tile, greyed out and not
   clickable, so the front page never links a reader into a 404. The image is
   desaturated so the state is legible at a glance, and the footer — where the
   call to action promises a destination — carries a "Coming soon" badge
   instead. */
.tile--soon { cursor: default; }
.tile--soon .tile__art img { filter: saturate(.25); opacity: .55; }
.tile__soon {
  border: 1px solid var(--sg-line); background: var(--sg-shell); color: var(--sg-muted);
  border-radius: 999px; padding: 4px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* --- 4. Scroll reveal ---------------------------------------------------- */
/* Applied by JS only when IntersectionObserver exists, so content is never
   hidden from a browser that cannot reveal it again. */
.js-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.js-reveal.is-in { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: .07s; }
.js-reveal[data-delay="2"] { transition-delay: .14s; }
.js-reveal[data-delay="3"] { transition-delay: .21s; }
.js-reveal[data-delay="4"] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .masthead__trace path { stroke-dashoffset: 0; animation: none; }
  .masthead__trace circle.node { opacity: .9; animation: none; }
  .masthead__trace circle.pulse { animation: none; }
}

@media print {
  .masthead__trace { display: none !important; }
  .masthead { background: none !important; color: #000; padding: 0 0 16px; border-bottom: 2px solid #000; }
  .masthead h1 { color: #000 !important; }
  .tile { box-shadow: none; break-inside: avoid; }
}