/* ===========================================================================
   EYOX phone-case PRINT DESIGNS  (round 8).
   One flat case colour, and over it a graphic built ONLY from the EYOX mark
   or its parts: the rising navy dome, the horizon glow circle, the tapering
   ray funnel. Ten different GRAPHIC SYSTEMS, not ten placements of one logo:
   rays as a field, the dome as a rising sun, the dome echoed into ripples,
   the glow circle scattered, the mark cropped to abstraction, the mark tiled,
   layered, outlined, and dissolved into halftone.
   Mark is coloured (navy / teal), the wordmark is navy, there is no product
   name. Frame, flat colours and camera come from mockup.css + designs.css;
   this file adds the ten skins only.
   =========================================================================== */

:root { --navy:#1B4079; --teal:#4D757F; --teal-d:#3C616B; --glow-a:#EFF8FB; --glow-b:#CFEAF0; --glow-c:#BFE3EA; }

.skin > svg.g { position:absolute; inset:0; width:100%; height:100%; display:block; }
.skin > .art  { position:absolute; }
.phone .logo .wm { width:118px; }

/* the mark symbol paints in currentColor; set color per use */
.mk-navy { color:var(--navy); }
.mk-teal { color:var(--teal); }

/* ======================================================================
   p01 — MERKTEKEN GROOT.  The whole mark, large and centred; wordmark
   beneath. The one design that shows the complete graphic.
   ====================================================================== */
.p01 .hero { left:50%; top:120px; transform:translateX(-50%); width:184px; height:184px; }
.p01 .logo { top:auto; bottom:76px; }
.p01 .logo .wm { width:122px; }

/* ======================================================================
   p02 — MERKCANVAS.  The mark shrunk and tiled tone-on-tone as a branded
   fabric; one clear lockup in the centre.
   ====================================================================== */
.p02 .canvas {
  inset:-20px;
  background-image:url("assets/eyox-mark.png");
  background-repeat:space; background-size:48px 48px;
  opacity:0.16;
}
.p02 .logo { top:298px; }
.p02 .logo .wm { width:120px; }

/* ======================================================================
   p03 — STRALENVELD.  Only the ray language: fine navy hairlines across
   the whole case, densest at a glow-circle origin and fading out. The
   rays become an ambient field rather than a logo.
   ====================================================================== */
.p03 .field {
  inset:0;
  background-image:repeating-linear-gradient(180deg,
    rgba(27,64,121,0.30) 0 1.4px, rgba(27,64,121,0) 1.4px 9px);
  -webkit-mask-image:radial-gradient(122% 76% at 50% 40%, #000 30%, rgba(0,0,0,0) 84%);
          mask-image:radial-gradient(122% 76% at 50% 40%, #000 30%, rgba(0,0,0,0) 84%);
}
.p03 .glow {
  left:50%; top:250px; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 40% 36%, var(--glow-a), var(--glow-b) 55%, rgba(191,227,234,0) 100%);
}
.p03 .logo { top:auto; bottom:66px; }

/* ======================================================================
   p04 — ZONSOPKOMST.  Only the dome + glow, blown up as a sunrise rising
   off the sides; the wordmark sits on the flat ground below the horizon.
   ====================================================================== */
.p04 .logo { top:auto; bottom:70px; }
.p04 .logo .wm { width:120px; }

/* ======================================================================
   p05 — ECHO.  The dome arc repeated as concentric ripples radiating from
   a point low on the case. Built from the dome shape alone.
   ====================================================================== */
.p05 .logo { top:150px; }
.p05 .logo .wm { width:112px; }

/* ======================================================================
   p06 — CIRKELVELD.  Only the horizon glow circle, scattered at varied
   sizes as a constellation of orbs, with a few solid navy points.
   ====================================================================== */
.p06 .logo { top:auto; bottom:64px; }
.p06 .logo .wm { width:112px; }

/* ======================================================================
   p07 — MACRO.  One mark cropped enormous so it bleeds off every edge and
   reads as pure abstract shape; a tiny wordmark in the opposite corner.
   ====================================================================== */
.p07 .logo { top:auto; bottom:44px; }
.p07 .logo .wm { width:120px; }

/* ======================================================================
   p08 — MONTAGE.  Several marks at different scales, tones and opacities,
   overlapping as an art-directed composition rather than a grid.
   ====================================================================== */
.p08 .logo { top:auto; bottom:60px; }
.p08 .logo .wm { width:116px; }

/* ======================================================================
   p09 — LIJNTEKENING.  The mark drawn as thin outline strokes: the dome an
   open arc, the glow a ring, the rays fine lines. Clinical and precise.
   ====================================================================== */
.p09 .out { left:50%; top:150px; transform:translateX(-50%); width:206px; height:206px; }
.p09 .logo { top:auto; bottom:70px; }
.p09 .logo .wm { width:116px; }

/* ======================================================================
   p10 — HALFTONE.  The glow circle at top dissolving downward into a navy
   halftone dot field that fades out. Built from the circle, not a generic
   dot texture.
   ====================================================================== */
.p10 .glow {
  left:50%; top:206px; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--glow-a), var(--glow-b) 52%, rgba(191,227,234,0) 100%);
  z-index:1;
}
.p10 .dots {
  inset:0;
  background-image:radial-gradient(circle, rgba(27,64,121,0.60) 1.9px, rgba(27,64,121,0) 2.3px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(96% 66% at 50% 33%, #000 6%, rgba(0,0,0,0) 78%);
          mask-image:radial-gradient(96% 66% at 50% 33%, #000 6%, rgba(0,0,0,0) 78%);
}
.p10 .logo { top:auto; bottom:64px; }
.p10 .logo .wm { width:116px; }

/* ======================================================================
   ROUND 10 — ten more in a tasteful, premium direction, grounded in how
   good branded cases are actually designed: restraint and negative space,
   two-tone colour blocking, tonal / monochrome, a whisper of texture, a
   considered lockup, an emblem, editorial asymmetry. Still built only
   from the mark. Adds a medium and a deep flat colour to the light set.
   ====================================================================== */
.flat-teal-mid { background:#4D757F; }
.flat-teal-mid .camera { background:linear-gradient(150deg,#436A74,#33555E); }
.flat-teal-mid.phone::after {
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.16),
              inset 0 -3px 8px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.flat-deep { background:#2E4F57; }
.flat-deep .camera { background:linear-gradient(150deg,#2A4A52,#1C3840); }
.flat-deep.phone::after {
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.12),
              inset 0 -3px 8px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* p11 Minimaal — a small mark, maximum calm space */
.p11 .msm { left:50%; top:250px; transform:translateX(-50%); width:94px; height:94px; }
.p11 .logo { top:auto; bottom:64px; } .p11 .logo .wm { width:92px; }

/* p12 Kleurblok — two flat fields split at the mark's horizon */
.p12 .logo { top:auto; bottom:58px; } .p12 .logo .wm { width:118px; }

/* p13 Toon-op-toon — a large tonal mark on a colour case */
.p13 .logo { top:auto; bottom:64px; } .p13 .logo .wm { width:118px; }

/* p14 Duotone — a large two-colour mark */
.p14 .duo { left:50%; top:150px; transform:translateX(-50%); width:196px; height:196px; }
.p14 .logo { top:auto; bottom:66px; } .p14 .logo .wm { width:120px; }

/* p15 Linnen — flat colour with a whisper of woven texture */
.p15 .linen { inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(58,80,88,0.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(58,80,88,0.05) 0 1px, transparent 1px 4px);
}
.p15 .msm { left:50%; top:228px; transform:translateX(-50%); width:104px; height:104px; }
.p15 .logo { top:auto; bottom:66px; } .p15 .logo .wm { width:112px; }

/* p16 Zegel — the mark inside a fine seal ring */
.p16 .logo { top:auto; bottom:64px; } .p16 .logo .wm { width:112px; }

/* p17 Editorial — asymmetric placement, wordmark seated under the rule */
.p17 .logo { top:346px; left:34px; right:auto; justify-content:flex-start; }
.p17 .logo .wm { width:104px; }

/* p18 Lockup — a centred mark over the wordmark, generous spacing */
.p18 .lk { left:50%; top:198px; transform:translateX(-50%); width:120px; height:120px; }
.p18 .logo { top:366px; } .p18 .logo .wm { width:128px; }

/* p19 Diagonaal — a diagonal two-tone colour block */
.p19 .logo { top:auto; bottom:58px; } .p19 .logo .wm { width:118px; }

/* p20 Rijk — a deep colour case with a small tonal mark */
.p20 .msm { left:50%; top:222px; transform:translateX(-50%); width:96px; height:96px; }
.p20 .logo { top:auto; bottom:64px; } .p20 .logo .wm { width:112px; }