/*
 * TFM Home CSS — Homepage-Styling
 * /wp-content/themes/blocksy-child/css/tfm-home.css
 *
 * Wird nur auf der Homepage geladen (via php/tfm-home.php).
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  --bg-page:       #0d0a1a;
  --bg-container:  rgba(20, 12, 40, 0.88);
  --border-glow:   rgba(140, 60, 255, 0.35);
  --border-subtle: rgba(140, 60, 255, 0.18);
  --purple-bright: #b06eff;
  --purple-mid:    #7c3aed;
  --purple-soft:   #c4a0ff;
  --cream:         #f0e8d8;
  --text-body:     #ddd4f0;
  --text-dim:      #9a8fbb;
  --fade-color:    #0d0a1a;
}

/* ============================================================
   1. Z-INDEX LAYERING
   ============================================================ */

.tfm-z-content { position: relative; z-index: 100; }

/* ============================================================
   2. SECTION FADES
   ============================================================ */

.tfm-fade { position: absolute; left: 0; right: 0; height: 220px; pointer-events: none; z-index: 60; }
.tfm-fade-top    { top: 0;    background: linear-gradient(to bottom, var(--fade-color), transparent); }
.tfm-fade-bottom { bottom: 0; background: linear-gradient(to top,   var(--fade-color), transparent); }

/* ============================================================
   3. GLOBAL BUTTON
   ============================================================ */

.tfm-btn {
  background: transparent; border: 1px solid var(--border-glow);
  color: var(--purple-soft); font-family: 'Jost', sans-serif;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 0.72rem 1.8rem;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  display: inline-block; position: relative; overflow: hidden;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.tfm-btn::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(180,120,255,0.12), transparent);
  transition: left 0.5s ease;
}
.tfm-btn:hover::before { left: 140%; }
.tfm-btn:hover { background: rgba(140,60,255,0.14); color: var(--cream); box-shadow: 0 0 20px rgba(140,60,255,0.25); }
.tfm-btn--primary { background: rgba(124,58,237,0.2); border-color: var(--purple-bright); color: var(--cream); }
.tfm-btn--primary:hover { background: rgba(124,58,237,0.35); box-shadow: 0 0 28px rgba(176,110,255,0.4); }
.tfm-btn--light { border-color: rgba(240,232,216,0.4); color: var(--cream); }
.tfm-btn--light:hover { background: rgba(240,232,216,0.1); border-color: var(--cream); }

/* ── Button Shine (Elementor native Buttons) ── */
.elementor-button { position: relative !important; overflow: hidden !important; }
.elementor-button::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: -80% !important; width: 50% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(180,120,255,0.15), transparent) !important;
  transition: left 0.5s ease !important; pointer-events: none !important; z-index: 1 !important;
}
.elementor-button:hover::before { left: 140%; }

/* ============================================================
   4. SCROLL REVEAL
   Klassen werden von js/tfm-global.js (tfmInitScrollReveal) gesetzt:
   'tfm-reveal--visible' UND 'visible' (beide gleichzeitig, siehe dort)
   ============================================================ */

.tfm-reveal       { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.tfm-reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.tfm-reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.tfm-reveal.visible, .tfm-reveal-left.visible, .tfm-reveal-right.visible { opacity: 1; transform: none; }

/* ============================================================
   5. HERO ANIMATIONEN
   ============================================================ */

@keyframes tfmSlideFromLeft  { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
@keyframes tfmSlideFromRight { from{opacity:0;transform:translateX(60px)}  to{opacity:1;transform:translateX(0)} }
@keyframes tfmFadeInDown     { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes tfmFadeInUp       { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }
@keyframes tfmFadeIn         { from{opacity:0} to{opacity:1} }

/* ── Hero Text Klassen ── */
.tfm-hero-pretitle {
  font-family: 'Cormorant Garamond', serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.38em; text-transform: uppercase; color: var(--purple-soft);
  animation: tfmFadeInDown 1s ease 0.3s both;
  text-shadow: 0 0 30px rgba(10,5,25,0.9), 0 2px 8px rgba(0,0,0,0.8);
}
.tfm-hero-title-welcome {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; color: var(--cream);
  letter-spacing: 0.05em; line-height: 1.1; animation: tfmSlideFromLeft 1s ease 0.5s both;
  text-shadow: 0 0 30px rgba(10,5,25,0.9), 0 2px 8px rgba(0,0,0,0.8);
}
.tfm-hero-title-kingdom {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--cream);
  letter-spacing: 0.03em; line-height: 1.1; animation: tfmSlideFromRight 1s ease 0.7s both;
  text-shadow: 0 0 30px rgba(10,5,25,0.9), 0 2px 8px rgba(0,0,0,0.8);
}
.tfm-hero-title-kingdom em { color: var(--purple-bright); font-style: normal; }
.tfm-hero-line { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--purple-bright), transparent); margin: 1.3rem auto; animation: tfmFadeIn 1s ease 0.9s both; }
.tfm-hero-subtitle { font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 300; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; animation: tfmFadeInUp 1s ease 1s both; text-shadow: 0 0 20px rgba(10,5,25,0.9), 0 2px 6px rgba(0,0,0,0.8); }
.tfm-hero-divider-wrap { animation: tfmFadeIn 1s ease 0.9s both; width: 100%; display: flex; justify-content: center; }
.tfm-hero-buttons-wrap { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: tfmFadeInUp 1s ease 1.2s both; }

/* ── Hero Orbs ── */
.tfm-hero-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.tfm-hero-orb-1 { width:700px; height:560px; top:-120px; left:-120px; background:radial-gradient(ellipse,rgba(140,60,255,0.55) 0%,transparent 65%); animation:tfmHeroBreath1 7.5s ease-in-out infinite; }
.tfm-hero-orb-2 { width:560px; height:440px; bottom:-100px; right:-80px; background:radial-gradient(ellipse,rgba(100,20,240,0.50) 0%,transparent 65%); animation:tfmHeroBreath2 10s ease-in-out infinite; }
.tfm-hero-orb-3 { width:400px; height:320px; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(176,110,255,0.40) 0%,transparent 65%); animation:tfmHeroBreath3 13s ease-in-out infinite; }
@keyframes tfmHeroBreath1 { 0%,100%{opacity:0.25;transform:scale(1)} 50%{opacity:1;transform:scale(1.6)} }
@keyframes tfmHeroBreath2 { 0%,100%{opacity:0.20;transform:scale(1)} 50%{opacity:0.95;transform:scale(1.7)} }
@keyframes tfmHeroBreath3 { 0%,100%{opacity:0.18;transform:translate(-50%,-50%) scale(1)} 50%{opacity:0.85;transform:translate(-50%,-50%) scale(2.0)} }

/* ── Hero Particles ── */
.tfm-hero-particle { position: absolute; border-radius: 50%; background: var(--purple-bright); pointer-events: none; z-index: 2; opacity: 0; animation: tfmParticleFloat linear infinite; }
@keyframes tfmParticleFloat { 0%{transform:translateY(0) translateX(0);opacity:0} 8%{opacity:0.9} 88%{opacity:0.3} 100%{transform:translateY(-280px) translateX(22px);opacity:0} }

/* ── Hero Arrow ── */
.tfm-hero-arrow { display:flex; flex-direction:column; align-items:center; gap:0.3rem; animation:tfmArrowBob 3s ease-in-out infinite; cursor:pointer; }
.tfm-hero-arrow-line { width:1px; height:42px; background:linear-gradient(to bottom,transparent,var(--purple-bright)); }
.tfm-hero-arrow-head { width:8px; height:8px; border-right:1px solid var(--purple-bright); border-bottom:1px solid var(--purple-bright); transform:rotate(45deg); }
@keyframes tfmArrowBob { 0%,100%{transform:translateY(0);opacity:0.5} 50%{transform:translateY(10px);opacity:1} }

/* ============================================================
   6. ENTRY SECTION
   ============================================================ */

.tfm-entry-pretitle { font-family: 'Cormorant Garamond', serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); }
.tfm-entry-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 400; color: var(--cream); line-height: 1.35; }
.tfm-entry-title em { font-style: italic; color: var(--purple-soft); }
.tfm-entry-text { font-size: 0.92rem; font-weight: 300; line-height: 1.92; color: var(--text-body); }
.tfm-entry-text em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: var(--purple-soft); }
.tfm-entry-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: var(--purple-soft); line-height: 1.92; }

/* ============================================================
   7. SHARED SECTION STYLES
   ============================================================ */

.tfm-section-pretitle { font-family: 'Cormorant Garamond', serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--purple-bright); opacity: 0.75; }
.tfm-section-title    { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--cream); letter-spacing: 0.04em; }
.tfm-section-subtitle { font-size: 0.85rem; font-weight: 300; color: var(--text-dim); line-height: 1.6; }

/* ============================================================
   8. "YOUR FUTURE" SECTION
   ============================================================ */

.tfm-future-section {
  position: relative;
  background: linear-gradient(to bottom, transparent 0%, rgba(10,5,24,0.68) 8%, rgba(10,5,24,0.68) 92%, transparent 100%);
}

/* ============================================================
   9. FLIP BOX CARD STYLES
   ============================================================ */

.tfm-flip-box .elementor-flip-box { border-radius: 12px !important; border: 1px solid rgba(140,60,255,0.18) !important; transition: border-color 0.3s, box-shadow 0.3s !important; }
.tfm-flip-box .elementor-flip-box:hover { border-color: rgba(140,60,255,0.35) !important; box-shadow: 0 8px 32px rgba(120,40,255,0.22) !important; }
.tfm-flip-box .elementor-flip-box__front { border-radius: 12px !important; }
.tfm-flip-box .elementor-flip-box__back  { border-radius: 12px !important; background: rgba(18,8,40,0.97) !important; border: 1px solid rgba(140,60,255,0.35); box-shadow: 0 0 30px rgba(120,40,255,0.18); }
.tfm-flip-box .elementor-flip-box__layer-title { font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; letter-spacing: 0.04em !important; }
.tfm-flip-box .elementor-flip-box__layer-desc  { font-family: 'Jost', sans-serif !important; font-size: 0.82rem !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--text-body) !important; }
.tfm-flip-box .elementor-flip-box__front,
.tfm-flip-box .elementor-flip-box__back { transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) !important; }
.tfm-flip-box .elementor-flip-box__front .elementor-flip-box__layer__overlay { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 0 !important; background: none !important; }
.tfm-flip-box .elementor-flip-box__front::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 38%; background: linear-gradient(to top, rgba(8,3,20,0.94) 0%, transparent 100%); pointer-events: none; z-index: 0; }
.tfm-flip-box .elementor-flip-box__front .elementor-flip-box__layer__inner { position: relative; z-index: 1; padding: 1.1rem 1.4rem; width: 100%; text-align: left; }
.tfm-flip-box .elementor-flip-box__front .elementor-flip-box__layer__title { margin-bottom: 0.3rem !important; }
.tfm-flip-box .elementor-flip-box__front .elementor-flip-box__layer__description { font-size: 0.62rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--text-dim) !important; opacity: 0.55 !important; }
.tfm-flip-box .elementor-button { background: transparent !important; border: 1px solid rgba(140,60,255,0.35) !important; color: var(--purple-soft) !important; border-radius: 8px !important; font-family: 'Jost', sans-serif !important; font-size: 0.7rem !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; padding: 0.45rem 1.1rem !important; transition: background 0.3s, color 0.3s !important; }
.tfm-flip-box .elementor-button:hover { background: rgba(140,60,255,0.14) !important; color: var(--cream) !important; }

/* ============================================================
   10. KINGDOM SECTION
   ============================================================ */

.tfm-kingdom-section { position: relative; overflow: hidden; }
.tfm-k-cloud { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; z-index: 0; }
.tfm-k-cloud-1 { width:600px; height:380px; top:18%; left:-60px;  background:radial-gradient(ellipse,rgba(110,25,240,0.42) 0%,transparent 60%); animation:tfmKcloud1 5.5s ease-in-out infinite; }
.tfm-k-cloud-2 { width:480px; height:300px; top:42%; right:-40px; background:radial-gradient(ellipse,rgba(65,0,175,0.38) 0%,transparent 60%);  animation:tfmKcloud2 7.7s ease-in-out infinite; }
.tfm-k-cloud-3 { width:420px; height:280px; bottom:8%;  left:30%; background:radial-gradient(ellipse,rgba(155,70,255,0.35) 0%,transparent 60%); animation:tfmKcloud3 5s ease-in-out infinite; }
.tfm-k-cloud-4 { width:340px; height:220px; top:28%; left:45%;   background:radial-gradient(ellipse,rgba(90,10,210,0.32) 0%,transparent 60%); animation:tfmKcloud4 6.6s ease-in-out infinite; }
@keyframes tfmKcloud1 { 0%,100%{transform:translateX(0) translateY(0) scale(1)} 40%{transform:translateX(90px) translateY(-35px) scale(1.08)} 70%{transform:translateX(-50px) translateY(50px) scale(0.95)} }
@keyframes tfmKcloud2 { 0%,100%{transform:translateX(0) translateY(0) scale(1)} 50%{transform:translateX(-80px) translateY(42px) scale(1.1)} }
@keyframes tfmKcloud3 { 0%,100%{transform:translateX(0) scale(1)} 35%{transform:translateX(65px) translateY(-28px) scale(1.12)} 70%{transform:translateX(-55px) translateY(18px) scale(0.92)} }
@keyframes tfmKcloud4 { 0%,100%{transform:translateX(0) translateY(0);opacity:0.7} 50%{transform:translateX(50px) translateY(-40px);opacity:1} }

/* ── Section Fades via Pseudo-Elemente ── */
.tfm-future-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 220px; background: linear-gradient(to bottom, transparent, var(--fade-color)); pointer-events: none; z-index: 60; }
.tfm-kingdom-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 220px; background: linear-gradient(to top, transparent, var(--fade-color)); pointer-events: none; z-index: 60; }
.tfm-cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 220px; background: linear-gradient(to bottom, var(--fade-color), transparent); pointer-events: none; z-index: 60; }

/* ── Kingdom Cards ── */
.tfm-kingdom-card { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow 0.4s, transform 0.08s; min-height: 300px; box-shadow: inset 0 0 0 1px rgba(140,60,255,0.18), 0 4px 20px rgba(0,0,0,0.3); }
.tfm-kingdom-card:hover { box-shadow: inset 0 0 0 1px rgba(140,60,255,0.35), 0 12px 40px rgba(120,40,255,0.28), 0 0 25px rgba(120,40,255,0.15); }
.tfm-kingdom-card, .e-con.tfm-kingdom-card, .elementor-element.tfm-kingdom-card { border: none !important; border-width: 0 !important; outline: none !important; }
.tfm-kingdom-card::after { content:''; position:absolute; top:-50%; left:-10%; width:3px; height:200%; background:linear-gradient(to bottom,transparent,rgba(180,130,255,0.55),transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; z-index:4; }
.tfm-kingdom-card:hover::after { animation:tfmCardShimmer 1.3s ease forwards; }
@keyframes tfmCardShimmer { 0%{left:-10%;opacity:0} 8%{opacity:1} 100%{left:115%;opacity:0} }
.tfm-kingdom-reveal { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: linear-gradient(to top, rgba(3,1,10,1.0) 0%, rgba(3,1,10,0.96) 40%, rgba(3,1,10,0.75) 70%, transparent 100%); padding: 1.5rem; transform: translateY(calc(100% - 120px)); transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); box-sizing: border-box; border-radius: 0 0 12px 12px; }
.tfm-kingdom-card:hover .tfm-kingdom-reveal { transform: translateY(0); }
.tfm-kingdom-card-symbol  { font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--purple-bright); opacity:0.7; margin-bottom:0.3rem; }
.tfm-kingdom-card-title   { font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:400; color:var(--cream); letter-spacing:0.04em; margin-bottom:0.3rem; }
.tfm-kingdom-card-tagline { font-size:0.65rem; color:var(--text-dim); letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; margin-bottom:1rem; }
.tfm-kingdom-card-desc    { font-size:0.78rem; font-weight:300; line-height:1.7; color:var(--text-body); margin-bottom:1.2rem; opacity:0; transform:translateY(8px); transition:opacity 0.3s ease 0.15s,transform 0.3s ease 0.15s; }
.tfm-kingdom-card:hover .tfm-kingdom-card-desc { opacity:1; transform:translateY(0); }
.tfm-kingdom-card-symbol, .tfm-kingdom-card-title { text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 25px rgba(0,0,0,0.85); }
.tfm-kingdom-card-tagline, .tfm-kingdom-card-desc { text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.tfm-kingdom-card * { -webkit-font-smoothing:antialiased; backface-visibility:hidden; }

/* ============================================================
   11. CTA PORTAL RINGS
   ============================================================ */

.tfm-cta-ring { position:absolute; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; animation:tfmRingPulse 4s ease-in-out infinite; }
.tfm-cta-ring:nth-child(1){width:180px; height:180px; border:1px solid rgba(140,60,255,0.22); animation-delay:0s;}
.tfm-cta-ring:nth-child(2){width:320px; height:320px; border:1px solid rgba(140,60,255,0.16); animation-delay:0.7s;}
.tfm-cta-ring:nth-child(3){width:480px; height:480px; border:1px solid rgba(140,60,255,0.11); animation-delay:1.4s;}
.tfm-cta-ring:nth-child(4){width:660px; height:660px; border:1px solid rgba(140,60,255,0.07); animation-delay:2.1s;}
.tfm-cta-ring:nth-child(5){width:880px; height:880px; border:1px solid rgba(140,60,255,0.04); animation-delay:2.8s;}
@keyframes tfmRingPulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.8} 50%{transform:translate(-50%,-50%) scale(1.04);opacity:1} }
.tfm-cta-portal { position:absolute; width:160px; height:160px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(176,110,255,0.42) 0%,rgba(124,58,237,0.22) 40%,transparent 70%); box-shadow:0 0 40px rgba(176,110,255,0.38),0 0 80px rgba(100,20,220,0.22); animation:tfmPortalGlow 5s ease-in-out infinite; pointer-events:none; }
@keyframes tfmPortalGlow { 0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)} }

/* ============================================================
   12. CTA PORTAL SECTION
   ============================================================ */

.tfm-cta-section { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, rgba(40,8,90,0.95) 0%, rgba(13,8,28,1) 65%); }
.tfm-cta-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(5,2,14,0.98)); pointer-events: none; z-index: 5; }
.tfm-cta-symbol   { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; letter-spacing: 0.2em; color: var(--purple-bright); opacity: 0.7; display: block; text-align: center; }
.tfm-cta-pretitle { font-family: 'Cormorant Garamond', serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(240,232,216,0.5); text-align: center; }
.tfm-cta-title    { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 400; color: var(--cream); line-height: 1.35; text-align: center; }
.tfm-cta-title em { color: var(--purple-bright); font-style: normal; }

/* ============================================================
   13. SECTION SPACING
   ============================================================ */

.tfm-future-section  { padding-top: 9rem !important; padding-bottom: 9rem !important; }
.tfm-kingdom-section { padding-top: 9rem !important; padding-bottom: 9rem !important; }
.tfm-cta-section     { padding-top: 8rem !important; padding-bottom: 8rem !important; }