/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

:root {
  --shadow-color: 0deg 0% 74%;
  --shadow-elevation-low:
    0.3px 0.4px 0.7px hsl(var(--shadow-color) / 0.07),
    1px 1.2px 2.2px -0.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.4px 0.7px hsl(var(--shadow-color) / 0.07),
    1.7px 2px 3.7px -0.3px hsl(var(--shadow-color) / 0.23),
    5.2px 6px 11.3px -0.5px hsl(var(--shadow-color) / 0.39);
  --shadow-elevation-high:
    0.3px 0.4px 0.7px hsl(var(--shadow-color) / 0.06),
    2.7px 3.1px 5.8px -0.1px hsl(var(--shadow-color) / 0.14),
    4.9px 5.7px 10.7px -0.2px hsl(var(--shadow-color) / 0.21),
    8px 9.3px 17.4px -0.3px hsl(var(--shadow-color) / 0.29),
    13px 15px 28.1px -0.4px hsl(var(--shadow-color) / 0.37),
    20.8px 24px 45px -0.5px hsl(var(--shadow-color) / 0.44);
}

#wrap .elementor .e-div-block-base {
    display: flex;
}

#header-bar {
    box-shadow: var(--shadow-elevation-high);
}

#header-bar img.hfe-site-logo-img {
    filter: drop-shadow(4.9px 5.7px 10.7px rgba(33, 33, 33, 0.23));
}


.hero-text:nth-child(1) {
    color: #EFCD0B;
}
.hero-text:nth-child(2) {
    color: #BF3100;
}
.hero-text:nth-child(3) {
    color: #B87333;
}
.hero-text:nth-child(4) {
    color: #D41518;
}

.hero-minifig {
    //filter: drop-shadow(-4.9px 18.7px 6.7px rgba(33, 33, 33, 0.23)) drop-shadow(-43px 61px 28.1px rgba(33, 33, 33, 0.5));
    cursor: pointer;
    transition: filter 0.1s;
    transform-origin: center center;
}

.figure:not(.animating):hover {
    animation: idle-nudge 0.35s ease-in-out;
  }

  @keyframes idle-nudge {
    0%   { transform: rotate(var(--land-rot, 0deg)); }
    30%  { transform: rotate(calc(var(--land-rot, 0deg) - 5deg)); }
    70%  { transform: rotate(calc(var(--land-rot, 0deg) + 5deg)); }
    100% { transform: rotate(var(--land-rot, 0deg)); }
  }

  /* Hard impact shake — rapid stiff rotations, no scale */
  @keyframes hard-shake {
    0%   { transform: rotate(var(--land-rot)) translateX(0px); }
    15%  { transform: rotate(calc(var(--land-rot) + 8deg))  translateX(-3px); }
    30%  { transform: rotate(calc(var(--land-rot) - 7deg))  translateX(3px); }
    46%  { transform: rotate(calc(var(--land-rot) + 5deg))  translateX(-2px); }
    62%  { transform: rotate(calc(var(--land-rot) - 3deg))  translateX(1px); }
    78%  { transform: rotate(calc(var(--land-rot) + 1.5deg))translateX(-1px); }
    100% { transform: rotate(var(--land-rot)) translateX(0px); }
  }

  .figure.landing {
    animation: hard-shake 0.38s cubic-bezier(.36,.07,.19,.97) forwards;
  }
  

/* =============================================
   HYBRID BUTTON SYSTEM
   Primary   → Smash       — JS (shatter physics)
   Secondary → Typewriter  — Pure CSS, no JS
   Tertiary  → Magnetic    — JS (cursor tracking only)
   ============================================= */


/* ── PRIMARY ── */
.pw {
  position: relative;
  display: inline-block;
}
#wrap .btn-p {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: #E83030;
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  min-width: 160px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 0 #9A1010;
  transition: background .1s, box-shadow .08s, transform .08s;
  -webkit-user-select: none;
  user-select: none;
}
#wrap .btn-p:hover  { background: #F04040; }
#wrap .btn-p:active { box-shadow: 0 1px 0 #9A1010; transform: translateY(4px); }

/* Shards injected + removed by JS */
.shard {
  position: absolute;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}


/* ── SECONDARY ──
   isolation: isolate creates a new stacking context so
   ::before (the flood fill at z-index:-1) sits behind
   the button's own text node without any extra elements. */
#wrap .btn-s {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #7B3FE4;
  background: transparent;
  border: 2px solid #7B3FE4;
  border-radius: 10px;
  padding: 11px 26px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;          /* key: lets z-index:-1 work on ::before */
  transition: color .2s, border-color .15s;
  min-width: 160px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

/* Flood fill */
#wrap .btn-s::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: #7B3FE4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.23, 1, .32, 1);
  z-index: -1;
}
#wrap .btn-s:hover         { color: #fff; border-color: #9F6FF0; }
#wrap .btn-s:hover::before { transform: scaleX(1); }
#wrap .btn-s:active::before{ background: #5A28C0; }

/* Blinking cursor — shown only while JS adds .typing class.
   ::after keeps markup clean; JS toggles the class only.    */
#wrap .btn-s.typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: .85em;
  background: currentColor;
  vertical-align: middle;
  margin-left: 2px;
  animation: cur-blink .6s step-end infinite;
}
@keyframes cur-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}


/* ── TERTIARY ──
   ::before = underline sweep
   ::after  = › arrow reveal
   Both pure CSS — zero extra HTML.                */
.tw {
  display: inline-block;
  padding: 10px;   /* invisible magnetic buffer — do not remove */
  margin: -10px;
}
#wrap .btn-t {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #6B7280;
  background: transparent;
  border: 2px solid;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: none;            /* hides cursor inside magnetic zone */
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color .15s;
  -webkit-user-select: none;
  user-select: none;
}
/* Underline */
#wrap .btn-t::before {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 18px;
  right: 18px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.23, 1, .32, 1);
}
/* Arrow */
#wrap .btn-t::after {
  content: '›';
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  transition: max-width .2s ease, opacity .18s, margin-left .18s;
}
#wrap .tw:hover .btn-t          { color: #111; }
#wrap .tw:hover .btn-t::before  { transform: scaleX(1); }
#wrap .tw:hover .btn-t::after   { max-width: 20px; opacity: 1; margin-left: 5px; }
#wrap .btn-t:active             { color: #9CA3AF; }