/* ====================================================================================================== */
/* V7-HEADER
 * Version:  v3.1.0
 * Issued:   2026-02-23
 * File:     portal.css
 * Path:     assets/css/mamadex/portal.css
 * Author:   Buktika Command Team
 * Owner:    Buktika - Binka
 * Purpose:  Thin luminous rim orb rendered inside .hero-portal-rect on mamadex.html.
 *           No particle layers. Designed to match the standalone portal demo.
 *           Orb glow and CTA text colours corrected to MamaDEX canonical palette
 *           (Colour Map v2.7.0 Section 3.3). Duplicate keyframe blocks removed.
 *           --text-light-color token defined. V7-HEADER applied per V7.1 spec.
 * Type:     CSS stylesheet
 * License:  © Buktika, 2026. All rights reserved.
 * ISO Reference: ISO/IEC 15897, ISO 27001
 * Source Naming Standard: Buktika v7.1 (ISO Aligned)
 *
 * ChangeLog:
 *   v3.1.0 (2026-02-23): Compliance pass against Colour Map v2.7.0 (Section 3.3).
 *     HEADER: Replaced non-compliant V8-HEADER with canonical V7-HEADER per V7.1 spec
 *             Section 2.5. Added all required fields (Version, Issued, File, Path,
 *             Author, Type, License, ISO Reference, Source Naming Standard) and
 *             enclosing decorative lines.
 *     TOKENS: --cta-glow-color changed from 255,215,0 (CSS Gold, non-canonical) to
 *             245,176,20 (--sdx-color-mama-amber #f5b014, canonical per Section 3.3).
 *             --text-dark-color changed from #444444 (non-canonical) to #111827
 *             (--sdx-color-slate-dark, canonical button text per Section 8.3).
 *             --text-light-color added as #ffffff (was referenced but undefined).
 *     COLOURS: rgba(61,61,236,...) (blue, non-MamaDEX) removed from orb-inner and
 *             replaced with rgba(34,15,39,...) (--sdx-color-mama-depth) for depth.
 *             rgba(249,166,0,...) and rgba(249,190,73,...) corrected to
 *             rgba(245,176,20,...) (mama-amber) and rgba(200,134,26,...) (mama-gold).
 *             rgba(255,200,0,...) in orb-rim corrected to rgba(245,176,20,...).
 *             All rgba(255,215,0,...) in orb-outer corrected to rgba(245,176,20,...).
 *     STRUCTURE: Removed duplicate @keyframes inhale (was defined twice).
 *               Removed duplicate @keyframes wobble (was defined twice).
 *               Removed duplicate .portal-text-container rule block (was defined twice).
 *   v3.0.0 (2025-11-24): Rotation Hook added. Font changed to Playfair Display.
 *             Glow colour changed to Gold/Yellow. (Original V8-HEADER version.)
 */
/* ====================================================================================================== */

/* ============================================================= */
/* ORB TOKENS                                                     */
/* ============================================================= */

:root {
  --portal-orb-rim-pos:       66%;
  --portal-orb-rim-thickness: 10.9%;
  --portal-orb-rim-soften:    5.4px;
  --portal-orb-inner-bloom:   18px;
  --portal-orb-outer-bloom:   18px;

  /* Glow colour — --sdx-color-mama-amber #f5b014 RGB (canonical Section 3.3) */
  --cta-glow-color: 245, 176, 20;

  /* Button text — --sdx-color-slate-dark #111827 (canonical Section 8.3) */
  --text-dark-color: #111827;

  /* CTA display text on dark orb surface */
  --text-light-color: #ffffff;
}

/* ============================================================= */
/* ORB CONTAINER                                                  */
/* ============================================================= */

.hero-portal-rect .portal-orb-container {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 80%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 1;
}

.portal-orb {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================================================= */
/* INNER FEATHER — mama-depth → mama-amber → mama-gold           */
/* ============================================================= */

.portal-orb .orb-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(34, 15, 39, 0.79) 0%,                                          /* mama-depth: grounding shadow */
      rgba(34, 15, 39, 0.27) calc(var(--portal-orb-rim-pos) - 12%),
      rgba(245, 176, 20, 0.76) calc(var(--portal-orb-rim-pos) - 6%),      /* mama-amber: festive light    */
      rgba(200, 134, 26, 0.94) calc(var(--portal-orb-rim-pos) - 2%)       /* mama-gold: ceremonial rim    */
    );
  filter: blur(var(--portal-orb-inner-bloom));
  mix-blend-mode: lighten;
  animation: portal-orb-breathe 14s ease-in-out infinite;
  z-index: 1;
}

/* ============================================================= */
/* BRIGHT RIM                                                     */
/* ============================================================= */

.portal-orb .orb-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(245, 176, 20, 0.08) 0 calc(var(--portal-orb-rim-pos) - (var(--portal-orb-rim-thickness) / 2)),
      #ffffff calc(var(--portal-orb-rim-pos) - (var(--portal-orb-rim-thickness) / 2)) calc(var(--portal-orb-rim-pos) + (var(--portal-orb-rim-thickness) / 2)),
      transparent calc(var(--portal-orb-rim-pos) + (var(--portal-orb-rim-thickness) / 2)) 100%
    );
  filter: blur(var(--portal-orb-rim-soften));
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.35);
  z-index: 2;
}

/* ============================================================= */
/* OUTER HALO — mama-amber glow                                   */
/* ============================================================= */

.portal-orb .orb-outer {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(245, 176, 20, 0.14) 0 calc(var(--portal-orb-rim-pos) + 1%),
      rgba(245, 176, 20, 0.55) calc(var(--portal-orb-rim-pos) + 5%),
      rgba(245, 176, 20, 0.82) calc(var(--portal-orb-rim-pos) + 12%),
      rgba(245, 176, 20, 0) 96%
    );
  filter: blur(var(--portal-orb-outer-bloom));
  mix-blend-mode: lighten;
  z-index: 3;
}

/* ============================================================= */
/* PORTAL CTA TEXT CONTAINER                                      */
/* ============================================================= */

.hero-portal-rect .portal-text-container {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: auto;
  z-index: 20;
}

/* ============================================================= */
/* ANIMATIONS                                                     */
/* ============================================================= */

@keyframes portal-orb-breathe {
  0%   { opacity: .78; filter: blur(var(--portal-orb-inner-bloom)) brightness(0.95); }
  40%  { opacity: 1;   filter: blur(var(--portal-orb-inner-bloom)) brightness(1.12); }
  70%  { opacity: .76; filter: blur(var(--portal-orb-inner-bloom)) brightness(0.92); }
  100% { opacity: .78; filter: blur(var(--portal-orb-inner-bloom)) brightness(0.95); }
}

@keyframes inhale {
  0%, 100% {
    transform: scale(1.15) rotateX(0deg) translateZ(0);
    opacity: 1;
    text-shadow:
      0 0 10px rgba(var(--cta-glow-color), 1.0),
      0 0 30px rgba(var(--cta-glow-color), 0.7);
  }
  40% {
    transform: scale(1.05) rotateX(-2deg) translateZ(0);
    opacity: 0.9;
    text-shadow:
      0 0 9px rgba(var(--cta-glow-color), 0.8),
      0 0 20px rgba(var(--cta-glow-color), 0.6);
  }
  80% {
    transform: scale(0.90) rotateX(-8deg) translateY(2px) translateZ(0);
    opacity: 0.8;
    text-shadow:
      0 0 8px rgba(var(--cta-glow-color), 0.7),
      0 0 15px rgba(var(--cta-glow-color), 0.5);
  }
}

@keyframes wobble {
  0%   { transform: rotateZ(-2.5deg); }
  50%  { transform: rotateZ(2.5deg); }
  100% { transform: rotateZ(-2.5deg); }
}

/* ============================================================= */
/* OUTER WRAPPER — handles slow Z-rotation (Wobble)              */
/* ============================================================= */

.wobble-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform-origin: center center;
  animation: wobble 40s ease-in-out infinite alternate;
  will-change: transform;
}

/* ============================================================= */
/* PORTAL CTA LINK — circular clickable area                     */
/* ============================================================= */

.hero-portal-rect .portal-cta-link {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 20;
  transform-origin: center center;
  animation: wobble 40s ease-in-out infinite alternate;
  will-change: transform;
  text-decoration: none;
  transition: background-color 0.2s;
}

.portal-cta-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================= */
/* INNER TEXT — breathing (Inhale) and typography                */
/* ============================================================= */

#portal-cta {
  display: inline-block;
  white-space: nowrap;

  /* Playfair Display: portal-specific high-ceremony editorial choice.
     Not in canonical body/heading stack (Libre Baskerville / Inter) but
     permitted here as a specialised component typeface. */
  font-family: "Playfair Display", serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(22px, 3.5vw, 40px);
  text-align: center;

  color: var(--text-light-color);
  text-shadow:
    0 0 10px rgba(var(--cta-glow-color), 1.0),
    0 0 30px rgba(var(--cta-glow-color), 0.7);

  margin: 0;
  line-height: 1.0;
  cursor: pointer;

  transform-origin: center center;
  animation: inhale 7.5s linear infinite;
  will-change: transform, opacity, text-shadow;
}

/* ============================================================= */
/* REDUCED MOTION                                                 */
/* ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .portal-cta-link,
  #portal-cta,
  .portal-orb .orb-inner {
    animation: none !important;
  }
}