/* =================================================================
   ornaments.css — Wildfire-inspired SVG sigil, diamond chains,
   corner brackets, tarot card borders
   ================================================================= */

/* ── DIAMOND-CHAIN RULE ─────────────────────────────────────────── */
/* Usage: <div class="rule rule--chain" aria-hidden="true"></div>    */
.rule {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}
.rule--chain {
  /* Rendered purely via inline SVG in HTML; this just controls layout */
  justify-content: center;
}

/* ── TAROT-CARD FRAME ───────────────────────────────────────────── */
/*
  Wrap any card with .tarot-frame to get corner brackets + side
  diamond accents. Works as a ::before / ::after + CSS custom property
  approach; the SVG data URI handles the art.
*/
.tarot-frame {
  position: relative;
}
.tarot-frame::before,
.tarot-frame::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: opacity .3s;
  /* SVG bracket — two L-shaped strokes, gold */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M2 14 L2 2 L14 2' fill='none' stroke='%23C9A84C' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tarot-frame::before { top: 0; left: 0; }
.tarot-frame::after  {
  bottom: 0; right: 0;
  transform: rotate(180deg);
}
.tarot-frame:hover::before,
.tarot-frame:hover::after { opacity: 0.9; }

/* Four-corner variant — adds extra pseudo via a wrapper span */
.tarot-frame-4c { position: relative; }
.tarot-frame-4c::before,
.tarot-frame-4c::after,
.tarot-frame-4c .corner-tr,
.tarot-frame-4c .corner-bl {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M2 14 L2 2 L14 2' fill='none' stroke='%23C9A84C' stroke-width='1.1' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: opacity .4s;
}
.tarot-frame-4c::before  { top: 6px; left: 6px; transform: rotate(0deg); }
.tarot-frame-4c::after   { bottom: 6px; right: 6px; transform: rotate(180deg); }
.tarot-frame-4c .corner-tr { position: absolute; display: block; top: 6px; right: 6px; transform: rotate(90deg); }
.tarot-frame-4c .corner-bl { position: absolute; display: block; bottom: 6px; left: 6px; transform: rotate(270deg); }
.tarot-frame-4c:hover::before,
.tarot-frame-4c:hover::after,
.tarot-frame-4c:hover .corner-tr,
.tarot-frame-4c:hover .corner-bl { opacity: 0.85; }

/* ── HERO SIGIL ─────────────────────────────────────────────────── */
/* The elongated flame / leaf glyph from Wildfire Dating             */
.hero-sigil {
  display: block;
  margin: 0 auto;
  width: clamp(64px, 10vw, 100px);
  height: auto;
  opacity: 0;
  animation: revealUp .9s .05s var(--ease-out) forwards;
  filter: drop-shadow(0 0 18px rgba(201,168,76,.25));
}

/* ── DIAMOND CHAIN ORNAMENT (inline SVG helper) ─────────────────── */
.dchain {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: visible;
}
.dchain--wide { max-width: 680px; }
.dchain--full { max-width: 100%; }
.dchain--sm   { max-width: 260px; }

/* ── TAROT PROJECT CARD ─────────────────────────────────────────── */
/*
  Extend .project-card with .project-card--tarot for full border art.
  Corner bracket spans are injected by JS.
*/
.project-card--tarot {
  border: 1px solid var(--gold-line);
}
.project-card--tarot .tc {           /* tarot corner span */
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: .4;
  transition: opacity .35s;
}
.project-card--tarot:hover .tc { opacity: .9; }
.project-card--tarot .tc-tl { top: 10px;  left: 10px;  transform: rotate(0); }
.project-card--tarot .tc-tr { top: 10px;  right: 10px; transform: rotate(90deg); }
.project-card--tarot .tc-bl { bottom: 10px; left: 10px;  transform: rotate(270deg); }
.project-card--tarot .tc-br { bottom: 10px; right: 10px; transform: rotate(180deg); }

/* ── SIDE DIAMOND ACCENT (left edge of card) ────────────────────── */
.side-diamonds {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  pointer-events: none;
}
.side-diamonds svg { opacity: .35; transition: opacity .3s; }
.project-card:hover .side-diamonds svg { opacity: .7; }

/* ── SECTION ORNAMENT DIVIDER ───────────────────────────────────── */
.sect-divider {
  display: flex;
  justify-content: center;
  padding: clamp(32px,4vw,52px) clamp(20px,5vw,72px);
}

/* ── WILDFIRE-STYLE GLOW RADIAL behind sigil ────────────────────── */
.sigil-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px,42vw,460px);
  height: clamp(180px,30vw,340px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(107,124,94,.10) 0%,
    rgba(201,168,76,.055) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}