@charset "UTF-8";
/* ==========================================================================
   Pakdis — brands sheet
   --------------------------------------------------------------------------
   The design is the image. This file's whole job is to present it the way a
   gallery presents a print: hang it on a ground, light it, and give the six
   marks on it something to respond with. Everything that moves is in
   js/brands.js.

   The one structural rule: `.sheet__stage` is sized by the image itself, and
   the hotspots are positioned in percentages of that box. Fixed pixel offsets,
   or a wrapper with its own width, would let the links drift off the wordmarks
   the moment the window is resized.
   ========================================================================== */

:root {
  --purple: #442f72;
  --purple-flood: #422a74;
  --purple-deep: #110735;
  --gold: #baa660;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { background: var(--purple-flood); }   /* no white flash before paint */

body {
  margin: 0;
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* Only as much as it takes to keep the card's gold frame off the window
     edge. */
  padding: clamp(10px, 1.4vw, 22px);
  /* brands.html is the one page that does not load css/style.css, so the stack
     is restated here rather than read from --font. Kept identical on purpose:
     if the token changes, this line changes with it. */
  font-family: "Modam", "Vazirmatn", "IRANSans", system-ui, sans-serif;
  overflow-x: hidden;

  /* Colour and pattern in one background stack, painted top to bottom:

       1. a flat veil of the corporate purple at 86%
       2. the pattern sheet, whole, at `cover`
       3. the corporate purple as the base colour

     The veil is what sets the pattern's strength. White ink at full alpha in
     layer 2 ends up as 14% white over purple once layer 1 is composited on
     top of it — the same result an `opacity` would have given, but reached
     without a second element.

     That matters, because a second element is exactly what went wrong before.
     The pattern used to live on `body::before` at `z-index: -1`. A negative
     z-index child paints behind its parent's background unless the parent
     establishes a stacking context, and `position: relative` with `z-index:
     auto` does not establish one — so the layer went behind this element's
     own opaque purple and was never visible. As background layers there is no
     stacking order to get wrong. */
  background:
    linear-gradient(rgb(66 42 116 / .86), rgb(66 42 116 / .86)),
    url("../assets/pattern-tile.png") center center / cover no-repeat,
    var(--purple-flood);
  background-attachment: fixed, fixed, fixed;
}

.sheet { width: 100%; max-width: 1680px; }

/* The heading is for screen readers and for search; the artwork carries it
   visually. `display: none` would remove it from the accessibility tree too,
   which is the opposite of the intent. */
.sheet__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sheet__stage {
  position: relative;
  /* The stage takes its height from the image, so `%` on the hotspots below
     resolves against exactly the box the artwork occupies. */
  line-height: 0;
  /* The print settles in rather than appearing. Held until the image has
     decoded — animating an empty box tells the reader nothing. */
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.sheet__stage.is-hung { opacity: 1; transform: none; }

.sheet__img {
  display: block;
  width: 100%;
  height: auto;
  /* On the old near-white ground the card measured 1.11:1 against the page and
     needed no shadow. Against the purple it is 11.6:1 and needs the opposite
     thing — something to stop it reading as cut out and pasted on. A long soft
     drop for the lift, a tighter one for contact, and a hairline of the brand
     gold so the edge belongs to the frame printed inside it. */
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgb(187 167 96 / .32),
    0 2px 4px rgb(11 5 32 / .3),
    0 18px 40px -18px rgb(11 5 32 / .55),
    0 60px 120px -40px rgb(11 5 32 / .8);
}

/* -- hotspots ------------------------------------------------------------- */
/* Each link's box comes from four custom properties set in the markup, which
   are the measured positions of the wordmarks in the PNG. Keeping them inline
   means the geometry lives next to the link it belongs to — if a mark moves in
   a new version of the artwork, one line changes. */
.hot {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: var(--r);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  display: block;
  border-radius: 10px 10px 26px 10px;    /* the identity's broken corner */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* Lifts the mark itself, not a panel over it: the filter acts on the picture
     behind the link, so the wordmark deepens in place while everything around
     it stays put. This is why the interaction can enhance the artwork without
     covering any of it. */
  -webkit-backdrop-filter: saturate(1) contrast(1);
          backdrop-filter: saturate(1) contrast(1);
  transition: backdrop-filter .3s var(--ease), -webkit-backdrop-filter .3s var(--ease);
}

.hot:hover,
.hot:focus-visible {
  -webkit-backdrop-filter: saturate(1.35) contrast(1.06);
          backdrop-filter: saturate(1.35) contrast(1.06);
}

/* Pakdis is the parent mark — the artwork already says so by placing it dead
   centre with everything else orbiting it. The interaction says it too, with a
   slightly deeper lift; the gold-edged label is in js/brands.js beside the rest
   of the label styling. */
.hot--lead:hover,
.hot--lead:focus-visible {
  -webkit-backdrop-filter: saturate(1.5) contrast(1.09);
          backdrop-filter: saturate(1.5) contrast(1.09);
}

.hot__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The frame and the label are built by the script into these elements — the
   sheet only says they must not swallow the pointer. */
.hot__frame,
.hot__tip { pointer-events: none; }

.hot:focus { outline: none; }          /* replaced by the frame and ring in JS */

/* -- responsive ----------------------------------------------------------- */
/* The card is one drawing and cannot reflow; it scales. The only thing that
   changes with the viewport is how large the pattern's motifs are, so the
   texture stays in proportion to the window rather than staying poster-sized
   against a phone. */

@media (max-width: 1200px) {
  body { padding: clamp(12px, 1.8vw, 24px); }
}

@media (max-width: 620px) {
  /* Portrait crops the sheet hard, so the veil goes up two points — a touch
     less ink keeps it a ground rather than a picture behind a picture. The
     shorthand also resets `background-attachment` to `scroll`, which is
     deliberate: fixed backgrounds are unreliable on mobile browsers and this
     page barely scrolls, so pinning them buys nothing here. */
  body {
    padding: 10px;
    background:
      linear-gradient(rgb(66 42 116 / .88), rgb(66 42 116 / .88)),
      url("../assets/pattern-tile.png") center center / cover no-repeat,
      var(--purple-flood);
  }
  .sheet__img {
    box-shadow:
      0 0 0 1px rgb(187 167 96 / .32),
      0 10px 24px -12px rgb(11 5 32 / .6);
  }
}

/* -- preferences ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet__stage { transition: none; opacity: 1; transform: none; }
  .hot { transition: none; }
}

@media print {
  body { padding: 0; background: #fff; }
  body { background: #fff; }
  .sheet { max-width: none; }
  .sheet__stage { opacity: 1; transform: none; }
  .sheet__img { box-shadow: none; }
}