/*
Portal Joelma-Luna — Intro Style v3
Mist en teksten vertellen samen dezelfde reis.
*/
#jl-portal-intro-v3,
#jl-portal-intro-v3 * { box-sizing:border-box; }

#jl-portal-intro-v3 {
  --portal-size:980px;
  --site-blur:16px;
  --site-dim:.20;
  --px:0px;
  --py:0px;

  --violet:#44118F;
  --indigo:#27339E;
  --royal-blue:#0E4FAE;
  --cyan:#008DAD;
  --turquoise:#238D80;
  --green:#668C50;
  --gold:#BE9D20;
  --ivory:#FFF9EE;
  --ice-blue:#D4E9FF;

  --mist-birth-duration:6500ms;
  --gate-reveal-duration:3400ms;
  --gate-exit-duration:1400ms;
  --message-enter-duration:1900ms;
  --message-leave-duration:1100ms;
  --final-suction-duration:3000ms;
  --portal-close-duration:6200ms;
  --finish-fade-duration:800ms;
  --outer-rotation:58s;
  --middle-rotation:36s;
  --inner-rotation:24s;
  --breathing-speed:6.4s;

  position:fixed;
  inset:0;
  z-index:2147483646;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;

  background:rgba(2,4,18,var(--site-dim));
  -webkit-backdrop-filter:blur(var(--site-blur)) saturate(.96) brightness(.96);
  backdrop-filter:blur(var(--site-blur)) saturate(.96) brightness(.96);

  opacity:1;
  visibility:visible;
  transition:
    opacity var(--finish-fade-duration) ease,
    visibility var(--finish-fade-duration) ease,
    background var(--portal-close-duration) ease,
    -webkit-backdrop-filter var(--portal-close-duration) ease,
    backdrop-filter var(--portal-close-duration) ease;
}

#jl-portal-intro-v3::before {
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-20;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 23% 38%,rgba(68,17,143,.15),transparent 32%),
    radial-gradient(ellipse at 42% 42%,rgba(14,79,174,.14),transparent 34%),
    radial-gradient(ellipse at 60% 45%,rgba(0,141,173,.13),transparent 32%),
    radial-gradient(ellipse at 74% 56%,rgba(102,140,80,.11),transparent 34%),
    radial-gradient(ellipse at 84% 66%,rgba(190,157,32,.09),transparent 30%);
  filter:blur(58px);
  opacity:0;
  transform:translate3d(var(--px),var(--py),0) scale(.35);
  transition:
    opacity var(--mist-birth-duration) ease,
    transform var(--mist-birth-duration) cubic-bezier(.16,1,.3,1);
  animation:jlWorldBreath 14s ease-in-out infinite alternate;
}

#jl-portal-intro-v3.is-born::before {
  opacity:1;
  transform:translate3d(var(--px),var(--py),0) scale(1.04);
}

.jl-portal-v3__world {
  position:relative;
  width:min(var(--portal-size),112vw);
  aspect-ratio:1.35/1;
  display:grid;
  place-items:center;
  transform:translate3d(var(--px),var(--py),0);
  transition:transform 500ms ease-out;
}

.jl-portal-v3__portal {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  filter:blur(24px);
  transform:scale(.018) rotate(-8deg);
  transition:
    opacity var(--mist-birth-duration) ease,
    transform var(--mist-birth-duration) cubic-bezier(.16,1,.3,1),
    filter calc(var(--mist-birth-duration)*.82) ease;
  will-change:transform,opacity,filter;
}

#jl-portal-intro-v3.is-born .jl-portal-v3__portal {
  opacity:1;
  filter:blur(0);
  transform:scale(1) rotate(0);
}

.jl-portal-v3__core {
  position:absolute;
  inset:22%;
  z-index:1;
  border-radius:48% 52% 57% 43%/55% 45% 52% 48%;
  background:
    radial-gradient(ellipse at 47% 50%,
      rgba(89,186,220,.18) 0%,
      rgba(39,51,158,.14) 35%,
      rgba(68,17,143,.07) 57%,
      transparent 78%);
  filter:blur(32px);
  opacity:.78;
  animation:jlCoreBreath var(--breathing-speed) ease-in-out infinite alternate;
}

.jl-portal-v3__veil {
  position:absolute;
  inset:17% 14%;
  z-index:2;
  border-radius:58% 42% 52% 48%/44% 61% 39% 56%;
  background:
    conic-gradient(from 210deg at 50% 52%,
      rgba(68,17,143,.18),
      rgba(14,79,174,.16),
      rgba(0,141,173,.14),
      rgba(35,141,128,.12),
      rgba(190,157,32,.10),
      rgba(68,17,143,.18));
  mix-blend-mode:screen;
  filter:blur(46px);
  opacity:.78;
  animation:jlVeilFloat 11s ease-in-out infinite alternate;
}

.jl-portal-v3__orbit {
  position: absolute;
  inset: 0;
  z-index: 3;

  transform-origin: 50% 50%;

  will-change:
    transform,
    scale,
    opacity,
    filter;

  scale: 1;
  opacity: 1;

  transition:
    scale var(--portal-close-duration) cubic-bezier(.62,.02,.92,.28),
    opacity var(--portal-close-duration) ease,
    filter var(--portal-close-duration) ease;
}

/* Geen zichtbare rondgaande beweging meer.
   De drie mistlagen openen, ademen en bewegen subtiel. */

.jl-portal-v3__orbit--outer {
  animation:
    jlPortalPulseOuter 9.5s ease-in-out infinite;
}

.jl-portal-v3__orbit--middle {
  animation:
    jlPortalPulseMiddle 8.2s ease-in-out infinite;
}

.jl-portal-v3__orbit--inner {
  animation:
    jlPortalPulseInner 7.1s ease-in-out infinite;
}

.jl-portal-v3__portal.is-recognising {
  animation:jlRecognise 650ms cubic-bezier(.2,.8,.2,1) both;
}
/*
.jl-portal-v3__portal.is-crossing .jl-portal-v3__orbit--middle,
.jl-portal-v3__portal.is-crossing .jl-portal-v3__orbit--inner {
  animation-direction:reverse;
}
*/
.jl-portal-v3__cloud {
  position:absolute;
  pointer-events:none;
  mix-blend-mode:screen;
  will-change:transform,filter,opacity;
}

.jl-portal-v3__cloud--violet {
  width:78%;height:76%;left:-1%;top:0%;
  border-radius:42% 58% 61% 39%/55% 41% 59% 45%;
  background:radial-gradient(ellipse at 46% 48%,
    rgba(68,17,143,.98),rgba(68,17,143,.62) 31%,
    rgba(90,34,181,.13) 57%,transparent 78%);
  filter:blur(39px);
  animation:jlCloudA 10.5s ease-in-out infinite alternate;
}

.jl-portal-v3__cloud--indigo {
  width:75%;height:79%;left:12%;top:-2%;
  border-radius:58% 42% 46% 54%/44% 59% 41% 56%;
  background:radial-gradient(ellipse at 50% 52%,
    rgba(39,51,158,.99),rgba(39,51,158,.64) 34%,
    rgba(62,73,191,.12) 59%,transparent 80%);
  filter:blur(42px);
  animation:jlCloudB 11.4s ease-in-out infinite alternate;
}

.jl-portal-v3__cloud--blue {
  width:72%;height:76%;left:28%;top:7%;
  border-radius:47% 53% 57% 43%/60% 40% 55% 45%;
  background:radial-gradient(ellipse at 49% 48%,
    rgba(14,79,174,.98),rgba(14,79,174,.63) 31%,
    rgba(35,102,199,.13) 58%,transparent 81%);
  filter:blur(40px);
  animation:jlCloudC 10.1s ease-in-out infinite alternate;
}

.jl-portal-v3__cloud--cyan {
  width:75%;height:78%;left:36%;top:8%;
  border-radius:53% 47% 39% 61%/44% 59% 41% 56%;
  background:radial-gradient(ellipse at 47% 52%,
    rgba(0,141,173,.96),rgba(0,141,173,.59) 34%,
    rgba(19,167,196,.11) 60%,transparent 81%);
  filter:blur(41px);
  animation:jlCloudD 10.9s ease-in-out infinite alternate;
}

.jl-portal-v3__cloud--turquoise {
  width:71%;height:75%;left:45%;top:15%;
  border-radius:61% 39% 56% 44%/48% 55% 45% 52%;
  background:radial-gradient(ellipse at 50% 49%,
    rgba(35,141,128,.93),rgba(35,141,128,.56) 35%,
    rgba(66,169,155,.10) 62%,transparent 82%);
  filter:blur(42px);
  animation:jlCloudE 12.1s ease-in-out infinite alternate;
}

.jl-portal-v3__cloud--green {
  width:67%;height:72%;left:53%;top:23%;
  border-radius:43% 57% 62% 38%/59% 41% 52% 48%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(102,140,80,.87),rgba(102,140,80,.51) 36%,
    rgba(131,170,114,.09) 62%,transparent 82%);
  filter:blur(43px);
  animation:jlCloudF 11.5s ease-in-out infinite alternate;
}
.jl-portal-v3__cloud--gold {
  width:50%;height:55%;left:48%;top:27%;
  border-radius:56% 44% 47% 53%/39% 61% 45% 55%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(190,157,32,.82),rgba(190,157,32,.46) 36%,
    rgba(213,195,79,.065) 63%,transparent 83%);
  filter:blur(49px);
  animation:jlCloudG 12.7s ease-in-out infinite alternate;
}

/* Transparante, maar toegankelijke klikzone */
.jl-portal-v3__gate-stage {
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transform:scale(.018);
  filter:blur(24px);
  pointer-events:none;
  transition:
    opacity var(--gate-reveal-duration) ease,
    transform var(--gate-reveal-duration) cubic-bezier(.16,1,.3,1),
    filter calc(var(--gate-reveal-duration)*.82) ease;
}
.jl-portal-v3__gate-stage.is-visible {
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  pointer-events:auto;
}
.jl-portal-v3__gate-stage.is-entering {
  opacity:0;
  transform:scale(.02);
  filter:blur(23px);
  pointer-events:none;
  transition:
    opacity var(--gate-exit-duration) ease,
    transform var(--gate-exit-duration) cubic-bezier(.65,0,.88,.24),
    filter var(--gate-exit-duration) ease;
}

.jl-portal-v3__gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(470px, 90vw);
  padding: 30px;

  border: 0;
  background: transparent;
  box-shadow: none;

  color: var(--ivory);
  text-align: center;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  transition:
    transform 650ms cubic-bezier(.22, .8, .28, 1),
    filter 600ms ease;
}
.jl-portal-v3__gate::before {
  content:"";
  position:absolute;
  left:50%;top:50%;
  z-index:-1;
  width:365px;height:190px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.80);
  background:radial-gradient(ellipse,
    rgba(62,139,218,.14),
    rgba(190,157,32,.055) 42%,transparent 74%);
  filter:blur(29px);
  opacity:.52;
  animation:jlGateBreath 5.4s ease-in-out infinite;
}
.jl-portal-v3__gate:hover,
.jl-portal-v3__gate:focus-visible {
  outline:none;
  transform:scale(1.018);
  filter:brightness(1.08);
}

.jl-portal-v3__gate-line {
  display:block;
  width:100%;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  line-height:1.24;
  text-align:center;
  transition:color 550ms ease,letter-spacing 550ms ease,text-shadow 550ms ease;
}

.jl-portal-v3__gate-line--pt {
  margin-bottom:13px;
  color:#FFF3C7;
  font-size:clamp(25px,2.65vw,36px);
  font-weight:600;
  letter-spacing:.035em;
  text-shadow:0 0 12px rgba(255,248,219,.30),0 0 32px rgba(190,157,32,.20);
}
.jl-portal-v3__gate-line--nl {
  margin-bottom:8px;
  color:rgba(220,240,255,.90);
  font-size:clamp(17px,1.65vw,22px);
  font-weight:500;
  letter-spacing:.045em;
  text-shadow:0 0 16px rgba(86,151,230,.22);
}
.jl-portal-v3__gate-line--en {
  color:rgba(211,232,255,.72);
  font-size:clamp(15px,1.4vw,19px);
  font-style:italic;
  letter-spacing:.055em;
  text-shadow:0 0 14px rgba(86,151,230,.16);
}

.jl-portal-v3__messages {
  position:relative;
  z-index:30;
  width:min(72%,760px);
  min-height:260px;
  display:grid;
  place-items:center;
  text-align:center;
  pointer-events:none;
}
.jl-portal-v3__message {
  position:absolute;
  inset-inline:0;
  display:grid;
  gap:.58em;
  opacity:0;
  transform:scale(.02);
  filter:blur(18px);
  will-change:transform,opacity,filter;
}
.jl-portal-v3__message-pt,
.jl-portal-v3__message-nl,
.jl-portal-v3__message-en {
  display:block;
  margin:0;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  text-align:center;
  text-wrap:balance;
}
.jl-portal-v3__message-pt {
  font-size:clamp(2rem,4.05vw,3.5rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:.025em;

  text-shadow:
    0 0 8px rgba(255,242,200,.16),
    0 0 18px rgba(215,182,73,.10),
    0 0 32px rgba(190,157,32,.06);
}
.jl-portal-v3__message-nl {
  color:var(--ice-blue);
  opacity:.69;
  font-size:clamp(1.02rem,1.88vw,1.5rem);
  font-weight:500;
  line-height:1.16;
  letter-spacing:.075em;
  text-shadow:0 0 15px rgba(64,112,220,.25);
}
.jl-portal-v3__message--ivory .jl-portal-v3__message-pt {
  color:var(--ivory);
  text-shadow:0 0 10px rgba(255,255,255,.30),0 0 32px rgba(255,255,255,.12);
}
.jl-portal-v3__message--blue .jl-portal-v3__message-pt {
  color:#C9DEFF;
  text-shadow:0 0 10px rgba(148,190,255,.40),0 0 34px rgba(35,102,199,.32);
}
.jl-portal-v3__message--gold .jl-portal-v3__message-pt {
  color:#F0D976;
  text-shadow:0 0 10px rgba(240,217,118,.40),0 0 36px rgba(213,195,79,.28);
}

.jl-portal-v3__message.is-entering {
  animation:jlMessageEnter var(--message-enter-duration) cubic-bezier(.16,1,.3,1) forwards;
}
.jl-portal-v3__message.is-leaving {
  animation:jlMessageLeave var(--message-leave-duration) ease-in forwards;
}
.jl-portal-v3__message.is-final-suction {
  animation:jlMessageSuction var(--final-suction-duration) cubic-bezier(.72,0,.94,.22) forwards;
}

/* Sluiting: tekst eerst, daarna mist */
#jl-portal-intro-v3.is-closing {
  background:rgba(2,4,18,0);
  -webkit-backdrop-filter:blur(0) saturate(1) brightness(1);
  backdrop-filter:blur(0) saturate(1) brightness(1);
}
#jl-portal-intro-v3.is-closing::before {
  opacity:0;
  transform:translate3d(var(--px),var(--py),0) scale(.02);
}
#jl-portal-intro-v3.is-closing .jl-portal-v3__portal {
  animation:jlPortalFoldClosed var(--portal-close-duration) cubic-bezier(.62,.02,.92,.28) forwards;
}

.jl-portal-v3__message.is-final-suction {
  animation: jlMessageSuction var(--final-suction-duration)
             cubic-bezier(.72,0,.94,.22) forwards;
}

/* ==========================================
   Engelse regel
   ========================================== */

.jl-portal-v3__message-en{
  display:block;
  margin-top:.45rem;

  font-family:var(--font-body);

  font-size:clamp(.82rem,1.15vw,1.02rem);
  font-weight:500;

  letter-spacing:.15em;

  color:rgba(255,255,255,.74);
}

.jl-portal-v3__gate-stage.is-entering .jl-portal-v3__gate-line {
  animation: none;
}

/* =========================================================
   VLOEIENDE PORTAALSLUITING
   De bestaande rotaties blijven onafgebroken doorlopen.
   Alleen schaal, zichtbaarheid en vervaging veranderen.
   ========================================================= */

#jl-portal-intro-v3.is-closing .jl-portal-v3__orbit--outer {
  scale: .018;
  opacity: 0;
  filter: blur(7px);
}

#jl-portal-intro-v3.is-closing .jl-portal-v3__orbit--middle {
  scale: .012;
  opacity: 0;
  filter: blur(6px);
}

#jl-portal-intro-v3.is-closing .jl-portal-v3__orbit--inner {
  scale: .006;
  opacity: 0;
  filter: blur(4px);
}

#jl-portal-intro-v3.is-closing .jl-portal-v3__core,
#jl-portal-intro-v3.is-closing .jl-portal-v3__veil {
  animation:jlCoreClose var(--portal-close-duration) cubic-bezier(.62,.02,.92,.28) forwards;
}
#jl-portal-intro-v3.is-complete {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  
 }
  
  

@keyframes jlWorldBreath {
  from {opacity:.72;transform:translate3d(calc(var(--px) - 5px),calc(var(--py) + 3px),0) scale(1.02);}
  to {opacity:1;transform:translate3d(calc(var(--px) + 5px),calc(var(--py) - 3px),0) scale(1.07);}
}
@keyframes jlRotateOuter {from{transform:rotate(0) scale(1)}to{transform:rotate(360deg) scale(1.015)}}
@keyframes jlRotateMiddle {from{transform:rotate(0) scale(1.01)}to{transform:rotate(-360deg) scale(.99)}}
@keyframes jlRotateInner {from{transform:rotate(0) scale(.99)}to{transform:rotate(360deg) scale(1.025)}}
@keyframes jlCoreBreath {from{opacity:.52;transform:scale(.88) rotate(-2deg)}to{opacity:.82;transform:scale(1.07) rotate(2deg)}}
@keyframes jlVeilFloat {from{opacity:.62;transform:translate3d(-2%,1%,0) scale(.96) rotate(-2deg)}to{opacity:.86;transform:translate3d(2%,-1%,0) scale(1.07) rotate(2deg)}}
@keyframes jlRecognise {0%{transform:scale(1);filter:brightness(1)}48%{transform:scale(1.035);filter:brightness(1.12)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes jlGateBreath {0%,100%{opacity:.36;transform:translate(-50%,-50%) scale(.80)}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.09)}}
@keyframes jlMessageEnter {
  0%{opacity:0;transform:scale(.02);filter:blur(18px);letter-spacing:-.055em}
  42%{opacity:.60;filter:blur(7px)}
  82%{opacity:1;transform:scale(1.035);filter:blur(0)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
@keyframes jlMessageLeave {from{opacity:1;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(1.045);filter:blur(10px)}}
@keyframes jlMessageSuction {
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  28%{opacity:1;transform:scale(1.025)}
  72%{opacity:.66;transform:scale(.13);filter:blur(8px)}
  100%{opacity:0;transform:scale(.002);filter:blur(20px)}
}
@keyframes jlCloseOuter {
  0%{opacity:1;transform:rotate(0) scale(1);filter:blur(0)}
  38%{opacity:1;transform:rotate(55deg) scale(.84);filter:blur(2px)}
  78%{opacity:.72;transform:rotate(76deg) scale(.24);filter:blur(7px)}
  100%{opacity:0;transform:rotate(82deg) scale(.006);filter:blur(2px)}
}
@keyframes jlCloseMiddle {
  0%{opacity:1;transform:rotate(0) scale(1)}
  42%{opacity:1;transform:rotate(-72deg) scale(.76)}
  80%{opacity:.68;transform:rotate(-94deg) scale(.18);filter:blur(7px)}
  100%{opacity:0;transform:rotate(-100deg) scale(.004);filter:blur(2px)}
}
@keyframes jlCloseInner {
  0%{opacity:1;transform:rotate(0) scale(1)}
  46%{opacity:1;transform:rotate(92deg) scale(.68)}
  82%{opacity:.60;transform:rotate(116deg) scale(.12);filter:blur(6px)}
  100%{opacity:0;transform:rotate(121deg) scale(.003);filter:blur(1px)}
}
@keyframes jlCoreClose {
  0%{opacity:.80;transform:scale(1);filter:blur(32px)}
  55%{opacity:.92;transform:scale(.68);filter:blur(20px)}
  88%{opacity:.78;transform:scale(.06);filter:blur(7px)}
  100%{opacity:0;transform:scale(0);filter:blur(0)}
}
@keyframes jlPortalFoldClosed {
  0%{opacity:1;transform:scale(1)}
  78%{opacity:1;transform:scale(.18)}
  94%{opacity:.84;transform:scale(.012)}
  100%{opacity:0;transform:scale(0)}
}
@keyframes jlCloudA {from{transform:translate3d(-4%,4%,0) scale(.95) rotate(-4deg)}to{transform:translate3d(4%,-3%,0) scale(1.08) rotate(2deg)}}
@keyframes jlCloudB {from{transform:translate3d(-2%,3%,0) scale(1.03) rotate(2deg)}to{transform:translate3d(3%,-4%,0) scale(.95) rotate(-2deg)}}
@keyframes jlCloudC {from{transform:translate3d(-3%,-1%,0) scale(.96) rotate(-2deg)}to{transform:translate3d(4%,3%,0) scale(1.08) rotate(2deg)}}
@keyframes jlCloudD {from{transform:translate3d(2%,4%,0) scale(1.04) rotate(3deg)}to{transform:translate3d(-3%,-3%,0) scale(.96) rotate(-2deg)}}
@keyframes jlCloudE {from{transform:translate3d(4%,2%,0) scale(.96) rotate(2deg)}to{transform:translate3d(-4%,-3%,0) scale(1.07) rotate(-3deg)}}
@keyframes jlCloudF {from{transform:translate3d(3%,-1%,0) scale(1.02) rotate(-2deg)}to{transform:translate3d(-3%,4%,0) scale(.94) rotate(3deg)}}
@keyframes jlCloudG {from{transform:translate3d(4%,-3%,0) scale(.94) rotate(2deg)}to{transform:translate3d(-4%,3%,0) scale(1.06) rotate(-3deg)}}

@media (max-width:900px) {
  .jl-portal-v3__messages{width:76%;min-height:220px}
  .jl-portal-v3__message-pt{font-size:clamp(1.8rem,5.2vw,2.9rem)}
  .jl-portal-v3__message-nl{font-size:clamp(1rem,2.7vw,1.38rem)}
}
@media (max-width:600px) {
  .jl-portal-v3__world{width:min(var(--portal-size),100vw);aspect-ratio:1/1}
  .jl-portal-v3__gate-stage{padding:18px}
  .jl-portal-v3__gate{width:min(350px,92vw);padding:22px 16px}
  .jl-portal-v3__gate-line--pt{margin-bottom:10px;font-size:clamp(23px,7vw,30px)}
  .jl-portal-v3__gate-line--nl{margin-bottom:7px;font-size:clamp(16px,4.6vw,19px)}
  .jl-portal-v3__gate-line--en{font-size:clamp(14px,4vw,17px)}
  .jl-portal-v3__messages{width:80vw;min-height:180px}
  .jl-portal-v3__message-pt{font-size:clamp(1.4rem,7vw,2.05rem)}
  .jl-portal-v3__message-nl{font-size:clamp(.86rem,3.8vw,1.1rem)}
}
@media (prefers-reduced-motion:reduce) {
  #jl-portal-intro-v3::before,
  .jl-portal-v3__portal,
  .jl-portal-v3__orbit,
  .jl-portal-v3__core,
  .jl-portal-v3__veil,
  .jl-portal-v3__cloud,
  .jl-portal-v3__gate::before {animation:none!important}
}
/* =========================================================
   LEVEND PORTAAL
   Langzaam openen, ademen en weer iets sluiten
   ========================================================= */

@keyframes jlPortalPulseOuter {
  0%,
  100% {
    transform:
      translate3d(-1%, 1%, 0)
      scale(.93);

    opacity: .78;
    filter: brightness(.95);
  }

  50% {
    transform:
      translate3d(1%, -1%, 0)
      scale(1.035);

    opacity: 1;
    filter: brightness(1.05);
  }
}

@keyframes jlPortalPulseMiddle {
  0%,
  100% {
    transform:
      translate3d(1%, 0, 0)
      scale(.90);

    opacity: .74;
    filter: brightness(.94);
  }

  50% {
    transform:
      translate3d(-1%, 1%, 0)
      scale(1.025);

    opacity: .97;
    filter: brightness(1.07);
  }
}

@keyframes jlPortalPulseInner {
  0%,
  100% {
    transform:
      translate3d(0, 1%, 0)
      scale(.87);

    opacity: .70;
    filter: brightness(.95);
  }

  50% {
    transform:
      translate3d(0, -1%, 0)
      scale(1.02);

    opacity: 1;
    filter: brightness(1.10);
  }
}

/* Portal Gate volledig transparant — overschrijft algemene sitestijlen */
#jl-portal-intro-v3 .jl-portal-v3__gate,
#jl-portal-intro-v3 .jl-portal-v3__gate:hover,
#jl-portal-intro-v3 .jl-portal-v3__gate:focus,
#jl-portal-intro-v3 .jl-portal-v3__gate:focus-visible,
#jl-portal-intro-v3 .jl-portal-v3__gate:active {
  width: min(470px, 90vw) !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  outline: none !important;

  -webkit-tap-highlight-color: transparent;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Mobiele tap-highlight volledig verwijderen */
#jl-portal-intro-v3 .jl-portal-v3__gate,
#jl-portal-intro-v3 .jl-portal-v3__gate *,
#jl-portal-intro-v3 .jl-portal-v3__gate:active,
#jl-portal-intro-v3 .jl-portal-v3__gate:focus,
#jl-portal-intro-v3 .jl-portal-v3__gate:focus-visible {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  tap-highlight-color: transparent !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

#jl-portal-intro-v3 .jl-portal-v3__gate::selection,
#jl-portal-intro-v3 .jl-portal-v3__gate *::selection {
  background: transparent;
}

/* Duidelijk ademende uitnodiging om te klikken */
#jl-portal-intro-v3 .jl-portal-v3__gate-line {
  display: block;
  transform-origin: center;

  animation:
    jlGateTextPulse 2.4s ease-in-out infinite !important;
}

#jl-portal-intro-v3 .jl-portal-v3__gate-line--nl {
  animation-delay: .14s !important;
}

#jl-portal-intro-v3 .jl-portal-v3__gate-line--en {
  animation-delay: .28s !important;
}

@keyframes jlGateTextPulse {
  0%,
  100% {
    opacity: .68;
    transform: scale(.96);
    filter: brightness(.92);

    text-shadow:
      0 0 5px rgba(255, 240, 185, .10);
  }

  50% {
    opacity: 1;
    transform: scale(1.055);
    filter: brightness(1.22);

    text-shadow:
      0 0 12px rgba(255, 240, 185, .48),
      0 0 30px rgba(190, 157, 32, .30);
  }
}

/* Puls stopt zodra er is geklikt */
#jl-portal-intro-v3
.jl-portal-v3__gate-stage.is-entering
.jl-portal-v3__gate-line {
  animation: none !important;
}

/* Betrouwbare puls van de volledige klikbare uitnodiging */
#jl-portal-intro-v3 .jl-portal-v3__gate {
  transform-origin: center center;
  will-change: transform, opacity, filter;

  -webkit-animation: jlGatePulseMobile 2.5s ease-in-out infinite !important;
  animation: jlGatePulseMobile 2.5s ease-in-out infinite !important;
}

@-webkit-keyframes jlGatePulseMobile {
  0%,
  100% {
    opacity: .78;
    -webkit-transform: scale(.97);
    transform: scale(.97);
    filter: brightness(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.055);
    transform: scale(1.055);
    filter: brightness(1.18);
  }
}

@keyframes jlGatePulseMobile {
  0%,
  100% {
    opacity: .78;
    transform: scale(.97);
    filter: brightness(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.055);
    filter: brightness(1.18);
  }
}

/* Puls stopt onmiddellijk na de klik */
#jl-portal-intro-v3
.jl-portal-v3__gate-stage.is-entering
.jl-portal-v3__gate {
  -webkit-animation: none !important;
  animation: none !important;
}

/* =========================================================
   GOUDEN ORB — daalt neer op de Portugese uitnodiging
   ========================================================= */

#jl-portal-intro-v3 .jl-portal-v3__gate {
  position: relative;
}

#jl-portal-intro-v3 .jl-portal-v3__gate-orb {
  position: absolute;
  left: 50%;
  top: -72px;

  width: 12px;
  height: 12px;
  border-radius: 50%;

  pointer-events: none;
  z-index: 5;

  opacity: 0;

  background:
    radial-gradient(
      circle,
      rgba(255,255,235,1) 0%,
      rgba(255,235,145,.98) 28%,
      rgba(224,183,52,.82) 55%,
      rgba(190,157,32,.30) 72%,
      transparent 100%
    );

  box-shadow:
    0 0 8px rgba(255,244,185,.65),
    0 0 18px rgba(220,180,55,.45),
    0 0 34px rgba(190,157,32,.25);

  transform:
    translateX(-50%)
    translateY(0)
    scale(.55);

  will-change:
    transform,
    opacity,
    filter;

  -webkit-animation:
    jlGateOrbJourney 9s ease-in-out infinite;

  animation:
    jlGateOrbJourney 9s ease-in-out infinite;
}

@-webkit-keyframes jlGateOrbJourney {
  0%,
  15% {
    opacity: 0;
    -webkit-transform:
      translateX(-50%)
      translateY(0)
      scale(.55);
    filter: brightness(.85);
  }

  22% {
    opacity: .65;
  }

  48% {
    opacity: .95;
    -webkit-transform:
      translateX(-50%)
      translateY(72px)
      scale(.85);
    filter: brightness(1.05);
  }

  56% {
    opacity: 1;
    -webkit-transform:
      translateX(-50%)
      translateY(88px)
      scale(1.65);
    filter: brightness(1.7);
  }

  63% {
    opacity: .58;
    -webkit-transform:
      translateX(-50%)
      translateY(88px)
      scale(1.15);
    filter: brightness(1.15);
  }

  72%,
  100% {
    opacity: 0;
    -webkit-transform:
      translateX(-50%)
      translateY(88px)
      scale(.45);
    filter: brightness(.8);
  }
}

@keyframes jlGateOrbJourney {
  0%,
  15% {
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(0)
      scale(.55);
    filter: brightness(.85);
  }

  22% {
    opacity: .65;
  }

  48% {
    opacity: .95;
    transform:
      translateX(-50%)
      translateY(72px)
      scale(.85);
    filter: brightness(1.05);
  }

  56% {
    opacity: 1;
    transform:
      translateX(-50%)
      translateY(88px)
      scale(1.65);
    filter: brightness(1.7);
  }

  63% {
    opacity: .58;
    transform:
      translateX(-50%)
      translateY(88px)
      scale(1.15);
    filter: brightness(1.15);
  }

  72%,
  100% {
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(88px)
      scale(.45);
    filter: brightness(.8);
  }
}

/* Zodra er wordt geklikt, verdwijnt de orb direct */
#jl-portal-intro-v3
.jl-portal-v3__gate-stage.is-entering
.jl-portal-v3__gate-orb {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* =========================================================
   GOUDEN ORB — altijd zichtbaar boven de kliktekst
   Overschrijft de transparante mobiele gate-regels
   ========================================================= */

#jl-portal-intro-v3 .jl-portal-v3__gate-orb {
  position: absolute;
  left: 50%;
  top: -72px;
  z-index: 10;

  width: 14px;
  height: 14px;
  border-radius: 50%;

  pointer-events: none;
  opacity: 0;

  background: radial-gradient(
    circle,
    rgba(255, 255, 245, 1) 0%,
    rgba(255, 238, 150, .98) 28%,
    rgba(224, 183, 52, .86) 55%,
    rgba(190, 157, 32, .32) 74%,
    transparent 100%
  ) !important;

  background-color: rgba(255, 224, 100, .95) !important;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 245, 1) 0%,
    rgba(255, 238, 150, .98) 28%,
    rgba(224, 183, 52, .86) 55%,
    rgba(190, 157, 32, .32) 74%,
    transparent 100%
  ) !important;

  box-shadow:
    0 0 8px rgba(255, 248, 205, .90),
    0 0 20px rgba(235, 195, 75, .70),
    0 0 40px rgba(190, 157, 32, .48) !important;

  transform:
    translateX(-50%)
    translateY(0)
    scale(.55);

  will-change: transform, opacity, filter;

  -webkit-animation:
    jlGateOrbJourney 9s ease-in-out infinite !important;

  animation:
    jlGateOrbJourney 9s ease-in-out infinite !important;
}



/* =========================================
   PORTAL JOELMA-LUNA
   CLOSE / SKIP INTRO
   ========================================= */

.jl-portal-v3__skip{
    position:fixed !important;
    right:20px !important;
    bottom:20px !important;
    left:auto !important;

    z-index:2147483647 !important;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    padding:0 !important;
    margin:0 !important;

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

    border:1px solid rgba(235,218,247,.85) !important;
    border-radius:50% !important;

    background:rgba(196,174,218,.82) !important;
    color:#fff9ee !important;

    font-family:Arial, sans-serif !important;
    font-size:28px !important;
    font-weight:300 !important;
    line-height:1 !important;

    cursor:pointer !important;

    box-shadow:
        0 0 10px rgba(205,178,229,.28),
        0 0 20px rgba(205,178,229,.10) !important;

    backdrop-filter:blur(8px);

    opacity:.88;

    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.jl-portal-v3__skip:hover{
    opacity:1;
    transform:scale(1.07) !important;

    box-shadow:
        0 0 14px rgba(205,178,229,.38),
        0 0 26px rgba(205,178,229,.16) !important;
}

.jl-portal-v3__skip:active{
    transform:scale(.96) !important;
}

.jl-portal-v3.is-skipped{
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .32s ease !important;
}




/* =========================================
   FIX SKIP / CLOSE BUTTON — MOBILE
   ========================================= */

@media(max-width:767px){

  #jl-portal-intro-v3 .jl-portal-v3__skip{
    position:fixed !important;

    right:14px !important;
    bottom:14px !important;
    left:auto !important;

    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;

    padding:0 !important;
    margin:0 !important;

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

    border-radius:50% !important;

    background:rgba(196,174,218,.88) !important;
    background-image:none !important;

    border:1px solid rgba(235,218,247,.9) !important;

    color:#fff9ee !important;

    font-size:24px !important;
    font-weight:300 !important;
    line-height:1 !important;

    box-shadow:
      0 0 10px rgba(205,178,229,.30) !important;

    transform:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;
  }

  #jl-portal-intro-v3 .jl-portal-v3__skip:hover,
  #jl-portal-intro-v3 .jl-portal-v3__skip:focus,
  #jl-portal-intro-v3 .jl-portal-v3__skip:active{
    width:38px !important;
    height:38px !important;

    background:rgba(196,174,218,.95) !important;
    background-image:none !important;

    color:#fff9ee !important;

    transform:none !important;
  }
}

/* =========================================
   IPHONE / SAFARI FIX — CLOSE INTRO BUTTON
   ========================================= */

@supports (-webkit-touch-callout: none) {

  #jl-portal-intro-v3 .jl-portal-v3__skip{
    position:fixed !important;

    right:16px !important;

    /* Houd rekening met iPhone safe-area */
    bottom:calc(20px + env(safe-area-inset-bottom)) !important;

    left:auto !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    max-width:40px !important;

    padding:0 !important;
    margin:0 !important;

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

    visibility:visible !important;
    opacity:1 !important;

    background:rgba(196,174,218,.92) !important;
    background-image:none !important;

    border:1px solid rgba(235,218,247,.95) !important;
    border-radius:50% !important;

    color:#fff9ee !important;

    font-size:25px !important;
    line-height:1 !important;

    z-index:2147483647 !important;

    -webkit-appearance:none !important;
    appearance:none !important;

    -webkit-transform:translateZ(0) !important;
    transform:translateZ(0) !important;

    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}