/* ============================================================
   DOMAINS SECTION — domain.css
   Self-contained: works even if css/style.css's .img-slot rules
   don't exist yet, since the background handling is scoped here.
   Reuses the same design tokens as about.css (falls back to the
   same values if about.css isn't loaded on a given page).
   ============================================================ */

:root{
  --dm-bg:      var(--bg, #0a0a0d);
  --dm-panel:   var(--panel, #131217);
  --dm-line:    var(--panel-line, #232028);
  --dm-blood:   var(--blood, #e0293e);
  --dm-amber:   var(--amber, #f2a541);
  --dm-teal:    #4fd1c5;
  --dm-text:    var(--text, #eee9e4);
  --dm-muted:   var(--muted, #9a949c);
  --dm-muted-2: var(--muted-2, #6b6670);
}

/* ---------- section shell + background image ---------- */
#domains{
  position:relative;
  overflow:hidden;
  padding:100px 0 90px;
  background:var(--dm-bg);
}

/* halftone dot texture, subtle, above bg image / below content */
#domains.halftone::before{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:6px 6px;
  pointer-events:none;
}

#domains .img-slot.slot-bleed.dim{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
#domains .img-slot.slot-bleed.dim img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  display:block;
  filter:saturate(1.05) contrast(1.08);
  opacity:0.85; /* actually show the artwork now */
}
/* scrim: dark only where content sits (top for header, bottom for
   fade-out) — the middle stays open so the art reads clearly */
#domains .img-slot.slot-bleed.dim::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(10,10,13,0.88) 0%,
      rgba(10,10,13,0.55) 16%,
      rgba(10,10,13,0.25) 34%,
      rgba(10,10,13,0.35) 62%,
      rgba(10,10,13,0.82) 88%,
      var(--dm-bg) 100%),
    radial-gradient(60% 55% at 50% 0%, rgba(224,41,62,0.14), transparent 70%);
}

#domains .wrap{
  position:relative;
  z-index:3;
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
  /* override the site-wide .section-alt/.wrap panel backdrop — it
     reads as an unwanted gray block now that the artwork background
     behind it is actually visible */
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

.domain-grid{
  background:transparent !important;
}

/* ---------- header row + globe icon ---------- */
#domains .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dm-blood);
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
}

#domains .section-title{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(34px, 4.2vw, 52px);
  line-height:1.02;
  letter-spacing:0.4px;
  text-transform:uppercase;
  margin:0 0 16px;
  color:var(--dm-text);
  text-shadow:0 2px 24px rgba(0,0,0,0.6);
}

#domains .section-sub{
  color:var(--dm-text);
  opacity:0.85;
  font-size:16px;
  line-height:1.7;
  max-width:58ch;
  margin:0 0 46px;
  text-shadow:0 1px 12px rgba(0,0,0,0.7);
}

/* Decorative spinning globe badge — bigger, no blend-mode wash-out,
   sits next to the eyebrow as a clear "worldwide domains" accent. */
.domain-globe{
  width:46px; height:46px;
  flex:0 0 auto;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(circle at 62% 74%, var(--dm-blood) 0%, #1c0d12 75%);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset -6px -6px 12px rgba(0,0,0,0.65),
    inset 2px 2px 5px rgba(255,255,255,0.12),
    0 0 18px rgba(224,41,62,0.55),
    0 0 34px rgba(224,41,62,0.25);
}
.domain-globe::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.75) 0px,
    rgba(255,255,255,0.75) 1.4px,
    transparent 1.4px,
    transparent 10px
  );
  background-size:220% 100%;
  animation:domain-globe-spin 5s linear infinite;
  opacity:0.9;
}
.domain-globe::after{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1.4px;
  background:rgba(255,255,255,0.7);
}
.domain-globe.is-paused::before{ animation-play-state:paused; }

@keyframes domain-globe-spin{
  from{ background-position:0% 0; }
  to{ background-position:-220% 0; }
}

.domain-globe .marker{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--dm-amber);
  box-shadow:0 0 8px var(--dm-amber), 0 0 14px var(--dm-amber);
  top:30%; left:62%;
  opacity:0;
  animation:domain-marker-pulse 3.2s ease-in-out infinite;
}
@keyframes domain-marker-pulse{
  0%, 100%{ opacity:0; transform:scale(0.6); }
  50%{ opacity:1; transform:scale(1); }
}

/* ---------- domain cards ---------- */
.domain-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  /* room above each row for the hero art to pop up into without being
     clipped by the section/grid bounds */
  padding-top:70px;
  row-gap:70px;
}

/* Outer card — deliberately NOT clipped (overflow:visible), so the
   hero image can rise up past the card's own top edge on hover. All
   the decorative effects that DO need clipping (shine sweep, gradient
   panel) live on .card-inner instead. */
.domain-card{
  --dc-accent: var(--dm-blood);
  position:relative;
  overflow:visible;
  isolation:isolate;
  cursor:default;
}

.domain-card:nth-child(4n+1){ --dc-accent: var(--dm-blood); }
.domain-card:nth-child(4n+2){ --dc-accent: var(--dm-amber); }
.domain-card:nth-child(4n+3){ --dc-accent: var(--dm-teal); }
.domain-card:nth-child(4n+4){ --dc-accent: var(--dm-amber); }

/* Raise the hovered card above its neighbors so the popped-up hero
   never renders underneath the card to its right. */
.domain-card:hover,
.domain-card:focus-within{
  z-index:20;
}

.card-inner{
  position:relative;
  height:100%;
  background:linear-gradient(160deg, rgba(24,22,28,0.92), rgba(14,13,17,0.92));
  border:1px solid var(--dm-line);
  border-radius:8px;
  padding:24px 22px 26px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}

.card-inner::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--dc-accent);
  opacity:0.55;
  transition:opacity .3s ease;
}

.card-inner::after{
  content:"";
  position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  transform:translateX(-60%);
  transition:transform .6s ease;
  pointer-events:none;
  z-index:2;
}

.domain-card:hover .card-inner,
.domain-card:focus-within .card-inner{
  transform:translateY(-6px);
  border-color:var(--dc-accent);
  box-shadow:
    0 18px 40px -14px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--dc-accent) 30%, transparent),
    0 0 28px -6px color-mix(in srgb, var(--dc-accent) 55%, transparent);
}
.domain-card:hover .card-inner::before{ opacity:1; }
.domain-card:hover .card-inner::after{ transform:translateX(60%); }

.card-inner > *{ position:relative; z-index:1; }

.card-inner .idx{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.12em; color:var(--dm-muted-2);
  margin-bottom:16px;
}

/* ---------- Hero pop-up: full-body art that rises out of the card on
   hover, with a genuine 3D tilt (perspective + rotateY/rotateX). JS
   (domain.js) adjusts --rx/--ry live based on cursor position for the
   tilt-follow effect; CSS alone handles the rise + fade. ---------- */
.hero-pop{
  position:absolute;
  left:50%;
  bottom:100%;
  width:132px;
  max-width:60%;
  transform:translate(-50%, 6%) scale(0.82);
  opacity:0;
  pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  z-index:5;
}
.domain-card:hover .hero-pop,
.domain-card:focus-within .hero-pop{
  opacity:1;
  transform:translate(-50%, -14%) scale(1);
}
.hero-pop-img{
  width:100%;
  display:block;
  transform:perspective(700px) rotateY(var(--ry, -10deg)) rotateX(var(--rx, 4deg));
  transform-origin:center bottom;
  transition:transform .15s ease-out;
  filter:
    drop-shadow(0 22px 20px rgba(0,0,0,0.6))
    drop-shadow(0 0 22px color-mix(in srgb, var(--dc-accent) 60%, transparent));
}
/* soft ground glow under the hero's feet while popped up */
.hero-pop::after{
  content:"";
  position:absolute;
  left:50%; bottom:-6px;
  width:70%; height:14px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, color-mix(in srgb, var(--dc-accent) 55%, transparent) 0%, transparent 72%);
  opacity:0;
  transition:opacity .4s ease .1s;
}
.domain-card:hover .hero-pop::after{ opacity:0.85; }

.card-inner h3{
  font-size:19px; font-weight:600; color:var(--dm-text);
  margin:0 0 8px;
}
.card-inner p{
  font-size:14px; line-height:1.6; color:var(--dm-muted);
  margin:0 0 18px;
}
.card-inner .power-tag{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.05em;
  color:var(--dc-accent);
  border:1px solid var(--dc-accent);
  background:color-mix(in srgb, var(--dc-accent) 10%, transparent);
  padding:5px 10px;
  border-radius:3px;
  transition:background .3s ease;
}
.domain-card:hover .power-tag{
  background:color-mix(in srgb, var(--dc-accent) 18%, transparent);
}

@media (max-width:640px){
  .domain-grid{ grid-template-columns:1fr; }
  #domains .wrap{ padding:0 24px; }
  /* tilt-follow needs a mouse; on touch just do the plain rise+fade */
  .hero-pop-img{ transform:none !important; }
}