/* ============================================================
   RWA & CO. — Logo Intro  v5
   WordPress: enqueue via rwa-intro-setup.php

   TIMELINE
   0.00 s  black screen
   0.60 s  fragments fly in (outer → inner)
   2.80 s  logo assembled → slow gleam sweeps across it
   3.60 s  fragment grid fades out
   3.70 s  oak wood wipes in left→right over 2.2 s
   5.90 s  wood full; crack-line flash
   5.95 s  crack halves appear & freeze
   6.60 s  overlay fades away (1.2 s)
   8.00 s  DOM removed (JS)
   ============================================================ */

:root {
  /* ── Oak palette: warm amber / honey tones ─────────────── */
  --rwa-o1: #1a0e05;   /* deep shadow              */
  --rwa-o2: #3b2008;   /* dark bark                */
  --rwa-o3: #5e3510;   /* mid oak                  */
  --rwa-o4: #8a5520;   /* warm amber oak           */
  --rwa-o5: #b87c38;   /* honey oak                */
  --rwa-o6: #d4a050;   /* light oak                */
  --rwa-o7: #e8c878;   /* pale grain highlight     */
  --rwa-o8: #f2dca0;   /* blonde highlight         */
  --rwa-od: #251408;   /* shadow vein              */

  /* ── Update this to your Media Library logo URL ────────── */
  --rwa-logo-url: url('assets/images/Logo-final.png');
}

*,*::before,*::after { box-sizing: border-box; }
body.rwa-active { overflow: hidden; }

/* ── Overlay ──────────────────────────────────────────────── */
#rwa-intro {
  position: fixed; inset: 0; z-index: 999999;
  background: #0a0806;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  animation: rwaOut 1.2s ease 6.6s forwards;
}
@keyframes rwaOut { to { opacity: 0; visibility: hidden; } }

.rwa-wrap {
  position: relative;
  width: min(46vw, 480px);
  aspect-ratio: 1188 / 1000;
}

/* ══════════════════════════════════════════════════════════
   STAGE 1 — Fragment assembly  (0.6 s → 2.8 s)
   ══════════════════════════════════════════════════════════ */
#rwa-grid {
  position: absolute; inset: 0;
  animation: rwaGridOut .4s ease 3.6s forwards;
}
@keyframes rwaGridOut { to { opacity: 0; } }

.rwa-piece {
  position: absolute; inset: 0;
  background-image:    var(--rwa-logo-url);
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.82);
  animation: rwaFly .8s cubic-bezier(.18,.82,.22,1.12) forwards;
  animation-delay: var(--delay);
}
@keyframes rwaFly {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  100% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
}

/* ══════════════════════════════════════════════════════════
   STAGE 1b — Slow gleam across assembled logo  (2.8 s → 4.2 s)
   A wide soft diagonal band of light drifts left→right,
   like sunlight or a torch catching the polished surface.
   ══════════════════════════════════════════════════════════ */
.rwa-gleam {
  position: absolute; inset: 0;
  -webkit-mask-image:    var(--rwa-logo-url); mask-image:    var(--rwa-logo-url);
  -webkit-mask-size:     contain;             mask-size:     contain;
  -webkit-mask-repeat:   no-repeat;           mask-repeat:   no-repeat;
  -webkit-mask-position: center;              mask-position: center;
  background: linear-gradient(105deg,
    transparent              0%,
    transparent             26%,
    rgba(255,240,200,.06)   33%,
    rgba(255,245,215,.28)   42%,
    rgba(255,250,225,.52)   50%,
    rgba(255,245,215,.28)   58%,
    rgba(255,240,200,.06)   67%,
    transparent             74%,
    transparent            100%);
  background-size: 260% 100%;
  background-position: 160% 0;
  opacity: 0;
  animation: rwaGleam 1.4s cubic-bezier(.38,0,.28,1) 2.8s forwards;
}
@keyframes rwaGleam {
  0%   { opacity: 0; background-position: 160% 0; }
  7%   { opacity: 1; }
  72%  { opacity: 1; background-position: -60% 0; }
  88%  { opacity: .5; }
  100% { opacity: 0; background-position: -60% 0; }
}

/* ══════════════════════════════════════════════════════════
   STAGE 2 — Oak wood wipes in left→right  (3.7 s → 5.9 s)
   clip-path sweeps; leading shimmer bar tracks the edge.
   Layer fades out at 5.92 s so no ghost behind crack.
   ══════════════════════════════════════════════════════════ */
.rwa-wood {
  position: absolute; inset: 0;
  -webkit-mask-image:    var(--rwa-logo-url); mask-image:    var(--rwa-logo-url);
  -webkit-mask-size:     contain;             mask-size:     contain;
  -webkit-mask-repeat:   no-repeat;           mask-repeat:   no-repeat;
  -webkit-mask-position: center;              mask-position: center;
  clip-path: inset(0 100% 0 0);
  animation:
    rwaWoodWipe 2.2s cubic-bezier(.35,0,.2,1) 3.7s  forwards,
    rwaWoodOut  .18s ease                     5.92s  forwards;
}
@keyframes rwaWoodWipe {
  0%   { clip-path: inset(0 100% 0 0); filter: brightness(1.8) saturate(.25); }
  12%  { filter: brightness(1.4) saturate(.5); }
  55%  { clip-path: inset(0 30% 0 0); }
  100% { clip-path: inset(0 0% 0 0);  filter: brightness(1) saturate(1); }
}
@keyframes rwaWoodOut { to { opacity: 0; } }

/* ── Oak grain layer 1: primary grain + medullary rays ───── */
.rwa-wood::before {
  content: ''; position: absolute; inset: 0;
  background:
    /* Fine interlocking grain lines — oak is denser than mahogany */
    repeating-linear-gradient(90.8deg,
      var(--rwa-o1)  0px,
      var(--rwa-o2)  1.5px,
      var(--rwa-od)  3px,
      var(--rwa-o3)  5.5px,
      var(--rwa-o2)  8px,
      var(--rwa-o4)  11px,
      var(--rwa-o3)  14.5px,
      var(--rwa-o5)  18px,
      var(--rwa-o4)  21px,
      var(--rwa-o3)  24.5px,
      var(--rwa-o2)  27px,
      var(--rwa-o4)  30px,
      var(--rwa-o5)  33.5px,
      var(--rwa-o6)  37px,
      var(--rwa-o4)  40px,
      var(--rwa-o3)  42.5px,
      var(--rwa-o2)  45px),
    /* Cross-grain micro-waviness */
    repeating-linear-gradient(89.3deg,
      rgba(0,0,0,.18)  0px,  transparent  1.5px,
      rgba(0,0,0,.10)  4px,  transparent   7px,
      rgba(0,0,0,.15) 11px,  transparent  15px,
      rgba(0,0,0,.08) 19px,  transparent  23px),
    /* Medullary ray shimmer (oak's signature silver streaks) */
    repeating-linear-gradient(91.8deg,
      rgba(232,200,120,.14)  0px, transparent  2px,
      transparent             8px,
      rgba(232,200,120,.09)  9px, transparent 11px),
    /* Corner shadow vignettes */
    radial-gradient(ellipse 70% 50% at 20% 18%, rgba(0,0,0,.45), transparent 55%),
    radial-gradient(ellipse 60% 45% at 80% 82%, rgba(0,0,0,.40), transparent 55%),
    /* Warm centre highlight */
    radial-gradient(ellipse 45% 35% at 50% 46%, rgba(200,160,80,.20), transparent 62%),
    /* Base honey-oak diagonal sweep */
    linear-gradient(155deg,
      var(--rwa-o8)  0%,
      var(--rwa-o7) 12%,
      var(--rwa-o6) 28%,
      var(--rwa-o5) 45%,
      var(--rwa-o4) 62%,
      var(--rwa-o3) 78%,
      var(--rwa-o2) 90%,
      var(--rwa-o1) 100%);
  background-blend-mode: normal, overlay, screen, multiply, multiply, screen, normal;
  box-shadow: inset 0 0 70px rgba(0,0,0,.65);
}

/* ── Oak grain layer 2: open pores + ray shimmer bars ────── */
.rwa-wood::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* Open wood pores */
    radial-gradient(rgba(0,0,0,.30)        1px,   transparent 1px),
    /* Grain crest highlights */
    radial-gradient(rgba(232,205,140,.24)  1px,   transparent 1px),
    /* Fine pore row */
    radial-gradient(rgba(0,0,0,.14)        1.5px, transparent 1.5px),
    /* Medullary ray sheen bars */
    repeating-linear-gradient(91deg,
      transparent               0px,
      rgba(240,210,130,.08)     1px,
      transparent               3px,
      rgba(240,210,130,.05)     4px,
      transparent               6px);
  background-size:     3px 3px, 5px 5px, 7px 7px, 100% 4px;
  background-position: 0 0,    1.5px 1.5px, 3px 1px, 0 0;
  mix-blend-mode: overlay;
}

/* ── Leading-edge shimmer bar ─────────────────────────────── */
.rwa-wood-edge {
  position: absolute; inset: 0;
  -webkit-mask-image:    var(--rwa-logo-url); mask-image:    var(--rwa-logo-url);
  -webkit-mask-size:     contain;             mask-size:     contain;
  -webkit-mask-repeat:   no-repeat;           mask-repeat:   no-repeat;
  -webkit-mask-position: center;              mask-position: center;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,235,170,.48) 50%,
    transparent 100%);
  background-size: 10% 100%;
  background-repeat: no-repeat;
  background-position: -10% 0;
  opacity: 0;
  animation: rwaEdge 2.2s linear 3.7s forwards;
}
@keyframes rwaEdge {
  0%   { opacity: 0; background-position: -10% 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; background-position: 110% 0; }
  100% { opacity: 0; background-position: 110% 0; }
}

/* ══════════════════════════════════════════════════════════
   STAGE 3 — Crack only, no split  (5.9 s → 6.6 s)
   Flash, halves shift & freeze, overlay fades.
   ══════════════════════════════════════════════════════════ */
.rwa-crack-flash {
  position: absolute; inset: 0;
  -webkit-mask-image:    var(--rwa-logo-url); mask-image:    var(--rwa-logo-url);
  -webkit-mask-size:     contain;             mask-size:     contain;
  -webkit-mask-repeat:   no-repeat;           mask-repeat:   no-repeat;
  -webkit-mask-position: center;              mask-position: center;
  background: linear-gradient(90deg,
    transparent 43%, #fff9e8 47%, #ffec90 50%, #fff9e8 53%, transparent 57%);
  opacity: 0;
  animation: rwaCrackFlash .5s ease 5.9s forwards;
}
@keyframes rwaCrackFlash { 0%{opacity:0;} 20%{opacity:1;} 100%{opacity:0;} }

.rwa-half {
  position: absolute; inset: 0;
  -webkit-mask-image:    var(--rwa-logo-url); mask-image:    var(--rwa-logo-url);
  -webkit-mask-size:     contain;             mask-size:     contain;
  -webkit-mask-repeat:   no-repeat;           mask-repeat:   no-repeat;
  -webkit-mask-position: center;              mask-position: center;
  overflow: hidden; opacity: 0;
}
/* Oak fill for halves — identical palette, no ghost */
.rwa-half .rwa-fill {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90.8deg,
      var(--rwa-o1)  0px, var(--rwa-o2)  1.5px, var(--rwa-od)  3px,
      var(--rwa-o3)  5.5px, var(--rwa-o2) 8px,  var(--rwa-o4) 11px,
      var(--rwa-o3) 14.5px, var(--rwa-o5) 18px, var(--rwa-o4) 21px,
      var(--rwa-o3) 24.5px, var(--rwa-o2) 27px, var(--rwa-o4) 30px,
      var(--rwa-o5) 33.5px, var(--rwa-o6) 37px, var(--rwa-o4) 40px,
      var(--rwa-o3) 42.5px, var(--rwa-o2) 45px),
    repeating-linear-gradient(89.3deg,
      rgba(0,0,0,.18)  0px, transparent  1.5px,
      rgba(0,0,0,.10)  4px, transparent   7px,
      rgba(0,0,0,.15) 11px, transparent  15px),
    radial-gradient(ellipse 70% 50% at 20% 18%, rgba(0,0,0,.45), transparent 55%),
    radial-gradient(ellipse 60% 45% at 80% 82%, rgba(0,0,0,.40), transparent 55%),
    linear-gradient(155deg,
      var(--rwa-o8)  0%, var(--rwa-o7) 12%, var(--rwa-o6) 28%,
      var(--rwa-o5) 45%, var(--rwa-o4) 62%, var(--rwa-o3) 78%,
      var(--rwa-o2) 90%, var(--rwa-o1) 100%);
  background-blend-mode: normal, overlay, multiply, multiply, normal;
  box-shadow: inset 0 0 60px rgba(0,0,0,.62);
}
/* Jagged crack polygon */
.rwa-half.rwa-L {
  clip-path: polygon(0 0,48% 0,46.5% 12%,51% 25%,44.5% 41%,50% 57%,45% 73%,48.5% 100%,0 100%);
  animation: rwaCL .55s cubic-bezier(.2,.9,.25,1.08) 5.95s forwards;
}
.rwa-half.rwa-R {
  clip-path: polygon(100% 0,52% 0,53.5% 12%,49% 25%,55.5% 41%,50% 57%,55% 73%,51.5% 100%,100% 100%);
  animation: rwaCR .55s cubic-bezier(.2,.9,.25,1.08) 5.95s forwards;
}
@keyframes rwaCL {
  from { opacity:0; transform:translate(0,0)    rotate(0deg);    }
  to   { opacity:1; transform:translate(-9px,1px) rotate(-.6deg); }
}
@keyframes rwaCR {
  from { opacity:0; transform:translate(0,0)    rotate(0deg);   }
  to   { opacity:1; transform:translate(9px,-1px) rotate(.6deg); }
}

/* ── Skip button ──────────────────────────────────────────── */
.rwa-skip {
  position: absolute; bottom: 28px; right: 28px;
  font-family: Georgia, serif; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #8a7a60; background: transparent;
  border: 1px solid rgba(138,122,96,.35);
  padding: 8px 18px; border-radius: 1px; cursor: pointer;
  opacity: 0;
  animation: rwaSkipIn .7s ease 1.2s forwards;
}
@keyframes rwaSkipIn { to { opacity: 1; } }
.rwa-skip:hover { color: #c8b08a; border-color: rgba(200,176,138,.5); }

@media (prefers-reduced-motion: reduce) { #rwa-intro { display: none; } }