/* ==========================================================================
   AkhilJ.ca — covers.css  (Version 2)
   TEMPORARY placeholder artwork for each project, built in HTML/CSS.

   Rules:
   - Quiet, abstract compositions. No invented logos, wordmarks or copy.
   - Each project keeps its own colour world; the AkhilJ accent is NOT used.
   - Replace with real project imagery (assets/images/projects/) as soon
     as assets are supplied — swap the .cover div for an <img>.

   Covers are size containers, so children use cqw / cqh units and scale
   from a small card to a full-width project hero.
   ========================================================================== */

.cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  transition: transform 1400ms var(--ease-out);
}
.project__link:hover .cover,
.project__link:focus-visible .cover { transform: scale(1.035); }
.cover * { transition-timing-function: var(--ease-out); }

/* ======================================================================
   OMNIPHI — abstract nod to its own palette (near-black, ivory, antique
   gold). Content frames + a single market line. OmniPhi's full identity
   will live inside its own microsite.
   ====================================================================== */
.cover--omniphi {
  --ivory: rgba(236, 229, 214, 0.34);
  --gold: #B39A63;
  background: #11110F;
}
.cover--omniphi::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(236, 229, 214, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 229, 214, 0.045) 1px, transparent 1px);
  background-size: 8cqw 8cqw;
  background-position: -1px -1px;
}
.om-frame {
  --w: min(15cqw, 30cqh);
  position: absolute;
  top: 50%;
  width: var(--w);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ivory);
  translate: 0 -50%;
  transition: transform 1400ms;
}
.om-frame::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 22%;
  bottom: 12%;
  height: 16%;
  background:
    linear-gradient(var(--ivory), var(--ivory)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) 0 50% / 72% 1px no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) 0 100% / 44% 1px no-repeat;
}
.om-frame--1 { left: 8cqw; }
.om-frame--2 { left: calc(8cqw + var(--w) * 1.14); border-color: var(--gold); }
.om-frame--2::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 12%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
}
.om-frame--3 { left: calc(8cqw + var(--w) * 2.28); }
.project__link:hover .om-frame--1 { transform: translateX(-1.2cqw); }
.project__link:hover .om-frame--3 { transform: translateX(1.2cqw); }

.om-chart {
  position: absolute;
  right: 7cqw;
  top: 26%;
  width: 32cqw;
  height: 48%;
}
.om-chart path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.om-chart .base { stroke: rgba(236, 229, 214, 0.2); stroke-dasharray: 2 5; }
.om-chart circle { fill: var(--gold); }

/* ======================================================================
   GETCHUP — soft lavender; one task at a time + a focus ring.
   ====================================================================== */
.cover--getchup {
  --violet: #5B4F8F;
  background: #E5E1EE;
}
.gc-list {
  --w: min(36cqw, 64cqh);
  position: absolute;
  left: 10cqw;
  top: 50%;
  width: var(--w);
  display: grid;
  gap: calc(var(--w) * 0.035);
  translate: 0 -50%;
}
.gc-row {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.05);
  height: calc(var(--w) * 0.15);
  padding: 0 calc(var(--w) * 0.05);
  border-radius: calc(var(--w) * 0.025);
  background: rgba(255, 255, 255, 0.72);
  transition: transform 1200ms, opacity 800ms;
}
.gc-row::before {
  content: "";
  flex: none;
  width: calc(var(--w) * 0.055);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(40, 34, 70, 0.35);
}
.gc-row::after {
  content: "";
  height: 1px;
  width: var(--l, 55%);
  background: rgba(40, 34, 70, 0.3);
}
.gc-row--now { background: var(--violet); }
.gc-row--now::before { border-color: rgba(255, 255, 255, 0.8); }
.gc-row--now::after { background: rgba(255, 255, 255, 0.7); }
.gc-row:nth-child(n + 2) { opacity: 0.6; }
.project__link:hover .gc-row:nth-child(n + 2) { opacity: 0.35; transform: translateX(1cqw); }

.gc-ring {
  position: absolute;
  right: 10cqw;
  top: 50%;
  width: min(28cqw, 52cqh);
  aspect-ratio: 1;
  translate: 0 -50%;
}
.gc-ring circle { fill: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.gc-ring .track { stroke: rgba(40, 34, 70, 0.16); }
.gc-ring .arc {
  stroke: var(--violet);
  stroke-dasharray: 100;
  stroke-dashoffset: 32;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1600ms;
}
.project__link:hover .gc-ring .arc { stroke-dashoffset: 18; }

/* ======================================================================
   PAWGUARD — sage and deep green; a single interface in a device frame.
   ====================================================================== */
.cover--pawguard {
  --green: #3E5E50;
  background: #D7DED6;
}
.pg-phone {
  --h: 96cqh;
  position: absolute;
  left: 50%;
  top: 14cqh;
  height: var(--h);
  aspect-ratio: 9 / 19;
  translate: -50% 0;
  padding: calc(var(--h) * 0.05) calc(var(--h) * 0.03);
  border-radius: calc(var(--h) * 0.06);
  background: #FAFAF7;
  box-shadow: 0 0 0 1px rgba(30, 45, 38, 0.12), 0 3cqh 8cqh -4cqh rgba(30, 45, 38, 0.3);
  display: grid;
  align-content: start;
  gap: calc(var(--h) * 0.025);
  transition: transform 1400ms;
}
.project__link:hover .pg-phone { transform: translateY(-2.5cqh); }
.pg-head { display: flex; align-items: center; gap: calc(var(--h) * 0.02); }
.pg-head i {
  width: calc(var(--h) * 0.06);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #C9D4C9;
}
.pg-head b { display: block; height: 1px; width: 40%; background: rgba(30, 45, 38, 0.35); }
.pg-card {
  height: calc(var(--h) * 0.16);
  border-radius: calc(var(--h) * 0.02);
  background: var(--green);
  position: relative;
}
.pg-card::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  border: 1px solid rgba(250, 250, 247, 0.55);
}
.pg-line {
  height: calc(var(--h) * 0.055);
  border-radius: calc(var(--h) * 0.012);
  background: linear-gradient(rgba(30, 45, 38, 0.28), rgba(30, 45, 38, 0.28)) 12% 50% / var(--l, 50%) 1px no-repeat, #F0F2EE;
}

/* ======================================================================
   TURNABOUT — neutral, premium placeholder (warm stone, charcoal hairlines).
   Deliberately understated until the real identity assets arrive.
   ====================================================================== */
.cover--turnabout {
  background: #E2DCD3;
  color: #2A2622;
}
.ta-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44cqw, 70cqh);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.ta-circle circle, .ta-circle path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ta-circle .soft { opacity: 0.25; }
.ta-circle .turn {
  transform-origin: 50% 50%;
  transition: transform 1800ms var(--ease-out);
}
.project__link:hover .ta-circle .turn { transform: rotate(180deg); }
.ta-swatches {
  position: absolute;
  left: 7cqw;
  bottom: 9cqh;
  display: flex;
  gap: 0.8cqw;
}
.ta-swatches i {
  width: min(3.2cqw, 6cqh);
  aspect-ratio: 1 / 1.6;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(42, 38, 34, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .cover, .cover * { transition: none !important; }
  .project__link:hover .cover { transform: none; }
}