/*
  do-not-click.html — everything on that page that cannot be a utility.

  Loaded after css/main.css and nothing in main.css or main.js was touched
  for it. Every rule sits inside @layer components so it obeys the same
  cascade as the rest of the site: a utility in the markup still wins,
  which is why every resting style on the page is a utility and only the
  drawn decoration, the keyframes, the runtime-built elephants and the
  states js/donot.js toggles live here. The prefix is dnc- and nothing
  outside do-not-click.html carries it.
*/

@layer components {

  /* Every elephant on the page is one of ten poses drawn for its
     section (images/dnc-ele-<pose>-<colour>.svg, generated as a family
     and recoloured with the section's own background baked into the
     eye and tusk cut-outs), used as <img>. The eye-test tile is the one
     inline copy, because its colour changes every round. */

  /* Hero wall: three rows only, under the bar. Each cell is a tan
     elephant with a red twin over it; the accent cell shows the red.
     js/donot.js moves the accent to whatever is pointed at and leaves
     it there, so nothing here reacts to :hover on its own. */
  .dnc-wall {
    height: calc(3 * 54px + 2 * 10px);
    overflow: hidden;
  }

  @media (width >= 768px) {
    .dnc-wall {
      height: calc(3 * 76px + 2 * 22px);
    }
  }

  .dnc-wall-cell {
    position: relative;
    display: block;
  }

  .dnc-wall-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  .dnc-wall-cell .dnc-wall-red {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  .dnc-wall-cell.is-accent img:first-child {
    opacity: 0;
  }

  .dnc-wall-cell.is-accent .dnc-wall-red {
    opacity: 0.85;
  }

  .dnc-hero-veil {
    background: radial-gradient(closest-side circle at 50% 54%,
        #fffbf5 12%,
        rgba(255, 251, 245, 0.9) 46%,
        rgba(255, 251, 245, 0) 80%);
  }

  /* A circle the width of a phone clears almost nothing behind the
     headline, so below the tablet width the veil is a wide ellipse. */
  @media (width < 768px) {
    .dnc-hero-veil {
      background: radial-gradient(ellipse 110% 44% at 50% 52%,
          #fffbf5 28%,
          rgba(255, 251, 245, 0.92) 58%,
          rgba(255, 251, 245, 0) 92%);
    }
  }

  /* Motion */
  @keyframes dnc-marq {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @keyframes dnc-marq-r {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }

  @keyframes dnc-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes dnc-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-16px) rotate(-2deg); }
  }

  @keyframes dnc-bob {
    0%, 100% { transform: translateY(14px); }
    50% { transform: translateY(0); }
  }

  @keyframes dnc-shake {
    0%, 100% { translate: 0 0; }
    25% { translate: -5px 0; }
    50% { translate: 5px 0; }
    75% { translate: -3px 0; }
  }

  /* Marquees: js/donot.js clones the one group in the markup until the
     row is at least twice its rail, so the -50% loop is seamless. */
  .dnc-marquee {
    display: flex;
    width: max-content;
    animation: dnc-marq var(--dnc-marq-t, 26s) linear infinite;
  }

  .dnc-marquee.is-reverse {
    animation-name: dnc-marq-r;
  }

  .dnc-marquee:hover {
    animation-play-state: paused;
  }

  .dnc-marquee.is-still {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }

  .dnc-marquee-group {
    display: flex;
    align-items: center;
    flex: none;
  }

  .dnc-marquee-group img {
    display: block;
    flex: none;
    height: auto;
    opacity: 0.7;
  }

  .dnc-rays {
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(236, 28, 36, 0.3) 0deg 9deg,
        rgba(236, 28, 36, 0) 9deg 18deg);
    animation: dnc-spin 70s linear infinite;
  }

  .dnc-float {
    animation: dnc-float 3.6s ease-in-out infinite;
  }

  .dnc-bob {
    animation: dnc-bob 3.4s ease-in-out infinite;
  }

  .dnc-beam {
    clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg,
        rgba(178, 137, 111, 0.55),
        rgba(178, 137, 111, 0.03));
  }

  /* Eye test */
  .dnc-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(var(--dnc-size, 3), 1fr);
  }

  .dnc-tile {
    padding: 5px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .dnc-tile-ele {
    --dnc-hole: #f7f0e8;
    display: block;
    width: 100%;
    height: auto;
    color: rgba(178, 137, 111, 0.4);
    transition: color 0.25s ease;
  }

  .dnc-tile.is-flash {
    background: rgba(17, 17, 17, 0.14);
    animation: dnc-shake 0.32s ease;
  }

  .dnc-time.is-low {
    color: var(--color-brand);
  }

  /* Six hands in the dark */
  .dnc-dark {
    touch-action: pan-y;
  }

  /* The picture is a dark photograph -- roughly half of it sits under
     luminance 40 -- so a torch landing on the shadows found nothing at
     all. It is lifted only while the panel is dark, which is also how a
     torch behaves: a focused beam is brighter than the room. The lights
     coming on restores the picture as shot. */
  .dnc-dark img {
    filter: brightness(1.45) contrast(0.96) saturate(1.05);
    transition: filter 1.1s ease;
  }

  .dnc-dark.is-lit img {
    filter: none;
  }

  .dnc-dark-overlay {
    background: #0f0c09;
    transition: opacity 1.1s ease;
  }

  .dnc-dark-glow {
    opacity: 0;
    background: radial-gradient(60% 55% at 50% 55%,
        rgba(178, 137, 111, 0.3),
        rgba(178, 137, 111, 0) 70%);
    transition: opacity 1.2s ease;
  }

  .dnc-dark.is-lit .dnc-dark-overlay {
    opacity: 0;
  }

  .dnc-dark.is-lit .dnc-dark-glow {
    opacity: 1;
  }

  /* Keeps the caption legible over the lit picture, which is brightest
     exactly where the caption sits. Painted above the overlay so it holds
     in the dark and in the light. */
  .dnc-dark-scrim {
    background: linear-gradient(to top,
        rgba(15, 12, 9, 0.9) 0%,
        rgba(15, 12, 9, 0) 100%);
    transition: opacity 1.1s ease;
  }

  .dnc-dark-hint {
    transition: opacity 0.8s ease;
  }

  /* Once the lights are on there is no dark left to move through, and the
     picture has earned the whole frame. */
  .dnc-dark.is-lit .dnc-dark-scrim,
  .dnc-dark.is-lit .dnc-dark-hint {
    opacity: 0;
  }

  .dnc-dark-copy {
    opacity: 0;
    transition: opacity 1.2s ease 0.3s;
  }

  .dnc-dark-copy.is-in {
    opacity: 1;
  }

  /* The result popup and the sound toggle sit outside .nhome-scroll:
     that wrapper is fixed and translated on desktop, so a fixed element
     inside it would be positioned against the wrapper, not the window. */
  .dnc-popup[hidden] {
    display: none;
  }

  .dnc-popup {
    background: rgba(24, 23, 24, 0.82);
  }

  @media (prefers-reduced-motion: reduce) {

    .dnc-marquee,
    .dnc-rays,
    .dnc-float,
    .dnc-bob {
      animation: none;
    }

    .dnc-tile.is-flash {
      animation: none;
    }

    .dnc-dark img,
    .dnc-dark-overlay,
    .dnc-dark-glow,
    .dnc-dark-copy,
    .dnc-dark-scrim,
    .dnc-dark-hint,
    .dnc-wall-cell img {
      transition: none;
    }
  }
}