/* EYOX case — PROFESSIONAL, out-of-the-box directions.
   The case treated as a designed object: materials, finishes, physical
   features and art-directed graphics, not a logo on a slab. Fifteen
   directions across four territories. Brand palette throughout (teal
   dominant, navy accent, mist/stone neutrals), no literal eye.
   Shown on the premium phone mockup (mockup.css). */

:root {
  --teal:   #4A737D; --teal-d: #3C616B; --teal-dd: #2C4952;
  --graphite:#26343A; --navy: #1B4079;
  --mist: #DCEAED; --stone: #ECE8DF; --glow: #CFE8EC;
  --silver-a:#EEF1F2; --silver-b:#C1C9CC; --silver-c:#DFE5E7;
}

/* ---- shared layering (self-contained; only needs mockup.css) ---- */
.skin { position: absolute; inset: 0; border-radius: 46px; overflow: hidden; z-index: 0; }
.phone > .camera { z-index: 3; }
.phone > .logo, .phone > .badge, .phone > .band, .phone > .tblock { z-index: 4; }
.phone::after { z-index: 6; }

/* neutral camera housings by ground */
.on-dark  .camera { background: linear-gradient(150deg, #2C3A40, #18242A); }
.on-teal  .camera { background: linear-gradient(150deg, #4C7A84, #3C616B); }
.on-light .camera { background: linear-gradient(150deg, #D6DDE1, #BFC9CE); }
.on-light.phone::after {
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.7), inset 0 -3px 8px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* engraved white logo helper */
.logo.eng .wm { opacity: 0.6; filter: drop-shadow(0 -0.8px 0 rgba(0,0,0,0.28)) drop-shadow(0 1.3px 0.2px rgba(255,255,255,0.34)); }
.logo.white .wm { filter: none; }
.logo.small { }
.logo.small .wm { width: 96px; }

/* =====================================================================
   TERRITORY A — MATERIAL & FINISH
   ===================================================================== */

/* 01 — ARAMID / carbon twill weave, embossed wordmark */
.p01 { background: #25373D; }
.p01 .weave {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.055) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.24) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #2A3E45, #1E3037);
}
.p01 .logo { top: auto; bottom: 54px; }
.p01 .logo .wm { width: 110px; }

/* 02 — FROSTED translucent over the phone body, crisp camera through it */
.p02 { background: #141F24; }
.p02 .inner { position: absolute; inset: 0; border-radius: 46px;
  background:
    radial-gradient(90px 90px at 74px 74px, #2b3a41 0 62px, transparent 64px),
    radial-gradient(130% 90% at 30% 10%, #46575e, #131e23 72%); }
.p02 .frost { position: absolute; inset: 0; border-radius: 46px;
  background: linear-gradient(158deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%), rgba(220,231,233,0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.p02 .logo { top: auto; bottom: 60px; }
.p02 .logo .wm { width: 104px; }

/* 03 — FULL-GRAIN LEATHER, blind-deboss logo, stitched edge */
.p03 { background:
    radial-gradient(120% 90% at 32% 18%, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
    radial-gradient(110% 85% at 72% 88%, rgba(0,0,0,0.22), rgba(0,0,0,0) 60%),
    linear-gradient(160deg, #35595F, #223F47); }
.p03 .grain {
  position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.07' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}
.p03 .grain::after { content: ''; position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }
.p03 .sheen { position: absolute; inset: 0;
  background: linear-gradient(158deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,0.12) 100%); }
.p03 .stitch { position: absolute; inset: 13px; border: 1.5px dashed rgba(255,255,255,0.30); border-radius: 34px; }
.p03 .logo { top: 300px; }
.p03 .logo .wm { width: 120px; opacity: 0.6;
  filter: drop-shadow(0 -0.8px 0 rgba(0,0,0,0.45)) drop-shadow(0 1.3px 0.3px rgba(255,255,255,0.26)); }

/* 04 — SPOT-GLOSS: matte teal, glossy tonal mark, specular sweep */
.p04 { background: linear-gradient(158deg, #4E7C86, #3E656F); }
.p04 .mark { position: absolute; left: 50%; top: 210px; transform: translate(-50%,-50%); width: 156px;
  opacity: 0.22; filter: brightness(0) invert(1); }
.p04 .gloss { position: absolute; inset: 0;
  background: linear-gradient(122deg, transparent 32%, rgba(255,255,255,0.16) 47%, rgba(255,255,255,0.02) 53%, transparent 68%); }
.p04 .logo { top: auto; bottom: 56px; }
.p04 .logo .wm { width: 100px; }

/* 05 — METAL BADGE inlay on soft-touch */
.p05 { background: linear-gradient(158deg, #4E7C86, #3E656F); }
.p05 .badge {
  position: absolute; left: 50%; top: 264px; transform: translate(-50%,-50%);
  width: 156px; height: 60px; border-radius: 11px;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 58%, rgba(255,255,255,0.4) 76%, rgba(255,255,255,0) 92%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.05) 1px 2px),
    linear-gradient(180deg, #EEF1F2 0%, #C6CDD0 52%, #E1E6E8 100%);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1.5px 1px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 0 0 3px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.p05 .badge .wm { width: 104px; display: block;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.75)); opacity: 0.9; }

/* =====================================================================
   TERRITORY B — ART-DIRECTED GRAPHICS
   ===================================================================== */

/* 06 — AURORA gradient mesh (muted, in-brand) */
.p06 {
  background:
    radial-gradient(58% 46% at 18% 14%, rgba(168,221,228,0.60), transparent 62%),
    radial-gradient(66% 58% at 86% 26%, rgba(27,64,121,0.55), transparent 60%),
    radial-gradient(80% 68% at 60% 96%, rgba(79,124,132,0.85), transparent 62%),
    linear-gradient(160deg, #3E656F, #2C4952);
}
.p06 .logo { top: 300px; }
.p06 .logo .wm { width: 112px; }

/* 07 — GUILLOCHE precision engraving */
.p07 { background: #3E656F; }
.p07 .eng { position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 50% 45%, transparent 0 4px, rgba(255,255,255,0.075) 4px 5px),
    repeating-radial-gradient(circle at 50% 45%, transparent 0 7px, rgba(255,255,255,0.05) 7px 8px),
    repeating-radial-gradient(circle at 28% 66%, transparent 0 6px, rgba(255,255,255,0.045) 6px 7px),
    repeating-radial-gradient(circle at 76% 30%, transparent 0 6px, rgba(255,255,255,0.04) 6px 7px);
}
.p07 .logo { top: auto; bottom: 56px; }
.p07 .logo .wm { width: 104px; }

/* 08 — FLUTED / ribbed soft-touch (vertical 3D ribs) */
.p08 { background: #3E656F; }
.p08 .flute { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0.20) 0px, rgba(0,0,0,0.04) 3px, rgba(255,255,255,0.13) 9px, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.20) 18px);
}
.p08 .logo { top: auto; bottom: 54px; }
.p08 .logo .wm { width: 104px; }

/* 09 — EDITORIAL oversized wordmark as art */
.p09 { background: #40666F; }
.p09 .big {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  font-family: var(--font); font-weight: 700; font-size: 116px; letter-spacing: -0.045em;
  color: rgba(255,255,255,0.15); white-space: nowrap;
}
.p09 .mark { position: absolute; left: 30px; bottom: 46px; width: 42px; opacity: 0.9; filter: brightness(0) invert(1); }

/* 10 — SCAN waveform */
.p10 { background: #3B646E; }
.p10 .wave { position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='632' fill='none'%3E%3Cpath d='M-10 316 L10 316 L30 300 L46 334 L62 276 L78 342 L92 300 L108 246 L122 366 L138 304 L152 324 L168 284 L184 350 L198 306 L214 300 L230 338 L246 266 L262 356 L278 312 L294 322 L310 288 L326 346 L342 306 L360 316 L380 316 L440 316' stroke='%23ffffff' stroke-opacity='0.66' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M-10 316 L440 316' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 24px);
  background-size: 300px 632px, auto, auto;
  background-repeat: no-repeat, repeat, repeat;
}
.p10 .logo { top: auto; bottom: 54px; }
.p10 .logo .wm { width: 104px; }

/* =====================================================================
   TERRITORY C — PATTERN SYSTEMS
   ===================================================================== */

/* 11 — WOVEN TWILL textile (fine diagonal weave) */
.p11 { background: #43707A; }
.p11 .twill { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(63deg, rgba(0,0,0,0.13) 0 1px, rgba(255,255,255,0) 1px 4px),
    repeating-linear-gradient(63deg, rgba(255,255,255,0.11) 2px 3px, rgba(255,255,255,0) 3px 7px),
    linear-gradient(158deg, #47747E, #3C646D);
}
.p11 .logo { top: 300px; }
.p11 .logo .wm { width: 114px; }

/* 12 — BLUEPRINT isometric grid + titleblock */
.p12 { background: #3E656F; }
.p12 .iso { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(30deg,  rgba(255,255,255,0.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(150deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.05) 0 1px, transparent 1px 24px);
}
.p12 .tblock {
  position: absolute; right: 24px; bottom: 40px; text-align: right;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 10px 12px;
}
.p12 .tblock .wm { width: 92px; display: block; margin-left: auto; }
.p12 .tblock .meta { margin-top: 7px; font-family: ui-monospace, Menlo, monospace; font-size: 9px;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.62); text-transform: uppercase; }

/* 13 — DUOTONE halftone gradient */
.p13 { background: #3F676F; }
.p13 .dots { position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1.6px, transparent 2.1px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(158deg, #000 8%, rgba(0,0,0,0) 76%);
          mask-image: linear-gradient(158deg, #000 8%, rgba(0,0,0,0) 76%);
}
.p13 .logo { top: auto; bottom: 54px; }
.p13 .logo .wm { width: 104px; }

/* =====================================================================
   TERRITORY D — PHYSICAL PRODUCT FEATURES
   ===================================================================== */

/* 14 — CLEAR tinted back: the phone body and MagSafe ring show through */
.p14 { background: linear-gradient(160deg, #52737C, #3A585F); }
.p14 .inner { position: absolute; inset: 0; border-radius: 46px;
  background:
    radial-gradient(circle at 50% 33%, transparent 52px, rgba(255,255,255,0.24) 53px 55.5px, transparent 56.5px),
    radial-gradient(circle at 50% 33%, transparent 12px, rgba(255,255,255,0.15) 13px 15px, transparent 16px),
    radial-gradient(130% 90% at 30% 10%, #6f8b92, #43616a 72%); }
.p14 .clear { position: absolute; inset: 0; border-radius: 46px;
  background: linear-gradient(158deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0.05) 100%); }
.p14 .bumper { position: absolute; inset: 0; border-radius: 46px; pointer-events: none;
  box-shadow: inset 0 0 0 10px #3E7A84, inset 0 0 0 11.5px rgba(255,255,255,0.16); }
.p14 .logo { top: auto; bottom: 30px; }
.p14 .logo .wm { width: 96px; }

/* 15 — UTILITY grip band with card slot */
.p15 { background: linear-gradient(158deg, #4E7C86, #3E656F); }
.p15 .band { position: absolute; left: 0; right: 0; bottom: 118px; height: 82px;
  background: linear-gradient(180deg, #375B64, #2C4C54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; }
.p15 .band .slot { position: absolute; top: 12px; left: 34px; right: 34px; height: 3px;
  border-radius: 3px; background: rgba(0,0,0,0.32); box-shadow: 0 1px 0 rgba(255,255,255,0.12); }
.p15 .band .wm { width: 104px; display: block; }