/*
Theme Name: FSTEST
Description: Whatsapp like Theme. Handmade with a lot of coffee. I'm glad you read this, because this means, you are alive!
Version: beta
Author: Mattamatita
Author URI: https://mattamatita.it
Tags: coffee, twoc, whatsapp, cats
Requires at least: some Wordpress
Requires PHP: ye!
*/

/* =========================
   ROOT
========================= */

:root {
 --bg:#f2f3f5;
 --text:#1c1e21;
 --muted:#6b7280;
 --accent:#c1fe04;
}

[data-theme="dark"] {
 --bg:#0f1419;
 --text:#e6ebf0;
 --muted:#8899a6;
}

/* =========================
   BASE
========================= */

body{
 margin:0;
 font-family:'Space Grotesk',sans-serif;
 color:var(--text);
 background:var(--bg);
 overflow-x:hidden;
}

body.dark{
 background:#0c1015 !important;
}

body.dark .message{
 background:rgba(28,36,44,.6) !important;
 color:#fff;
}


/* =========================
   ULTRA REALISTIC BLOB
========================= */

body::before,
body::after{
 content:"";
 position:fixed;
 width:700px;
 height:700px;
 border-radius:50%;
 filter:blur(140px) saturate(120%);
 z-index:-1;
 pointer-events:none;
}

/* Haupt Blob */
body::before{
 background:radial-gradient(circle at 30% 30%, #efa014, #7aa7ff, #7affd4);
 top:5%;
 left:5%;

 animation:blobFloat1 60s ease-in-out infinite alternate;
}

/* Zweiter Blob */
body::after{
 background:radial-gradient(circle at 70% 70%, #c1fe04, #6ecbff, #edb95d);
 bottom:5%;
 right:5%;

 animation:blobFloat2 80s ease-in-out infinite alternate;
}

/* DARK MODE */
body.dark::before{
 background:radial-gradient(circle at 30% 30%, #1a2a3a, #2a1f3a, #0f1f2a);
}

body.dark::after{
 background:radial-gradient(circle at 70% 70%, #1a1f2a, #222836, #141922);
}

/* Bewegung viel smoother */
@keyframes blobFloat1{
 0%{transform:translate(0,0) scale(1)}
 50%{transform:translate(60px,-40px) scale(1.1)}
 100%{transform:translate(-40px,60px) scale(6.05)}
}

@keyframes blobFloat2{
 0%{transform:translate(0,0) scale(1)}
 50%{transform:translate(-70px,50px) scale(1.15)}
 100%{transform:translate(50px,-60px) scale(6.05)}
}

/* =========================
   GLASS DEPTH REACTION
========================= */

.message{
 transition:
  transform 0.4s ease,
  box-shadow 0.4s ease;
}

.message.active{
 transform:translateY(-4px) scale(1.01);

 box-shadow:
 0 20px 60px rgba(0,0,0,0.12),
 0 0 40px rgba(193,254,4,0.08);
}

/* subtle glow layer */
body{
 background-image:
  radial-gradient(circle at 20% 30%, rgba(193,254,4,0.08), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(0,150,255,0.06), transparent 50%);
}

/* animations */
@keyframes bgMove {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

@keyframes bgMoveReverse {
  0% { background-position: 0 0; }
  100% { background-position: -200px -200px; }
}

/* =========================
   HEADER
========================= */

.site-header{
 position:sticky;
 top:0;
 z-index:9999;

 height:92px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 20px;
font-weight:900;

 background: rgba(19,40,61,0.85);

 backdrop-filter: blur(16px);

 box-shadow:
  0 4px 20px rgba(0,0,0,0.35);

 border-bottom:1px solid rgba(255,255,255,0.08);

 color:#fff;
 font-family:'Orbitron',sans-serif;
font-weight:900;
}

/* logo */
.logo{
 text-decoration:none;
 display:flex;
font-weight:900;
 gap:2px;
}

.logo span:nth-child(1){color:#009246;}
.logo span:nth-child(2){color:#ffffff;}
.logo span:nth-child(3){color:#ce2b37;}

/* =========================
   CHAT
========================= */

.chat-wrapper{
 max-width:650px;
 margin:auto;
 padding:16px;
	margin-bottom:120px;
}

/* =========================
   MESSAGE (GLASS CARD)
========================= */


.message{
 width:70%;
 margin:auto;

 background: rgba(255,255,255,0.25);
 backdrop-filter: blur(14px);

 border-radius:20px;
 padding:14px;
 margin-bottom:106px;

 border:1px solid rgba(255,255,255,0.25);

 box-shadow:
  0 8px 30px rgba(0,0,0,0.08);

 transition: all 0.25s ease;
}

/* neon edge */
.message::after{
 content:"";
 position:absolute;
 inset:0;
 border-radius:20px;

 background: linear-gradient(
 120deg,
 rgba(193,254,4,0.2),
 transparent,
 rgba(0,150,255,0.15)
 );

 opacity:0.2;
 pointer-events:none;
}

/* active glow */
.message.active{
 transform:translateY(-3px);

 box-shadow:
  0 12px 40px rgba(0,0,0,0.15),
  0 0 40px rgba(193,254,4,0.15);
}

/* DARK */
[data-theme="dark"] .message{
 background: rgba(28,36,44,0.75);
 border:1px solid rgba(255,255,255,0.4);
}

/* =========================
   MEDIA
========================= */

.media-slider{
 display:flex;
 overflow-x:auto;
 scroll-snap-type:x mandatory;
}

/* =========================
   SNAP SLIDER
========================= */

.slide{
 flex:0 0 100%;
 height:450px;
 min-height:400px;

 overflow:hidden;
 border-radius:16px;

 box-shadow:
  0 6px 20px rgba(0,0,0,0.15);
}

.slide img,
.slide video{
 width:100%;
 height:100%;
 object-fit:cover;

 transition: transform 0.6s ease;
}



/* =========================
   TEXT
========================= */

.desc{
 font-size:15px;
 line-height:1.6;
}

.desc a{
 color:#c1fe04;
 text-decoration:none;
}

.desc a:visited{
 color:#414b63;
}

/* =========================
   CTA (SHIMMER)
========================= */

.cta{
 position:relative;
 overflow:hidden;

 display:block;
 margin-top:10px;
 padding:14px;

 text-align:center;
 font-weight:600;
 text-decoration:none;
z-index:100;

 border-radius:14px;

 background: rgba(96,186,79,0.80);

 border:1px solid rgba(96,186,79,0.04);

 box-shadow:
  0 6px 20px rgba(193,254,4,0.25);

 color:#1c1e21;
}

/* flowing shimmer */
.cta::before{
 content:"";
 position:absolute;
 inset:-2px;
 border-radius:16px;

 background: linear-gradient(
 120deg,
 transparent,
 rgba(162,219,40,0.4),
 transparent
 );

 opacity:0.88;

 animation: shimmerMove 6s linear infinite;
}

@keyframes shimmerMove{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* DARK */
[data-theme="dark"] .cta{
 color:#e6ebf0;
}

/* =========================
   FOOTER
========================= */

.site-footer{
 position:fixed;
 bottom:0;
 width:100%;
  left:0;
  z-index:9998;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
  background: rgba(96,186,79,0.85);
 padding:10px 12px calc(14px + env(safe-area-inset-bottom));
}

.footer-inner{
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 gap:8px;
 width:100%;
 text-align:center;
 box-sizing:border-box;
}

.footer-inner a{
 color:#000!important;
 text-decoration:none;
 font-weight:500;
}

.site-footer center,
.site-footer p{
 width:100%;
 margin:0;
 text-align:center;
 box-sizing:border-box;
}

.slide video{
 object-fit:cover;
 background:transparent;
}

/* =========================
   VIDEO CONTAINER
========================= */

.video-container{
 position:relative;
 width:100%;
 height:100%;
 overflow:hidden;
 border-radius:12px;
 background:transparent;
}


/* VIDEO */
.video-container video{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}

.video-container.vimeo iframe{

 position:absolute;
 
 z-index:1;
 width:100%;
 height:100%;

 transform:translate(-0%, -0%) scale(1.2);
 transform-origin:center;
 pointer-events:auto;

}


@media (min-width: 768px){
 .video-container.vimeo iframe{
	 z-index:2;
 }
}

/* =========================
   VIMEO THUMB
========================= */

.vimeo-thumb{
 position:absolute;
 inset:0;
 background-size:cover;
 background-position:center;
 z-index:2; /* über iframe */
 pointer-events:none;

 opacity:1;
 transition: opacity 1s ease-out;
}


/* =========================
   VIMEO IFRAME
========================= */

.video-container.vimeo iframe{
 opacity:0;
 transition: opacity 0.4s ease; /* schneller → kein Gap */

 position:absolute;

 z-index:1;

 width:100%;
 height:100%;


 pointer-events:auto;
}

/* wenn Video bereit */
.video-container.vimeo iframe.ready{
 opacity:1;
}


/* Desktop Scaling bleibt gleich */
@media (min-width: 750px){
 .video-container.vimeo iframe{
  z-index:2;
 }
}


/* =========================
   FLOATING WHATSAPP BUTTON (REAL FIX)
========================= */

.wa-float{
  position:fixed;
  right:16px;
  bottom:100px;
  z-index:99999;

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

  width:44px;
  height:44px;

  border-radius:50%;

  background:linear-gradient(
    180deg,
    #34d058,
    #25d366
  );

  box-shadow:
    0 10px 30px rgba(37,211,102,0.35),
    0 4px 10px rgba(0,0,0,0.2);

  backdrop-filter:blur(10px);

  transition:transform 0.2s ease, box-shadow 0.2s ease;
  margin:0;
}

/* Icon im Button */
.wa-float img{
  width:32px;
  height:32px;
  object-fit:contain;
}

/* iOS press feedback */
.wa-float:active{
  transform:scale(0.92);
  box-shadow:
    0 6px 16px rgba(37,211,102,0.3);
}

/* Desktop spacing */
@media (min-width:768px){
  .wa-float{
    right:24px;
    bottom:280px;
  }
}

/* =========================
   WHATSAPP = CTA STYLE
========================= */

.wa-float{
  position:fixed;
  right:16px;
  bottom:100px;
  z-index:99999;

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

  width:64px;
  height:64px;
  margin:0;

  padding:0; /* DAS ist der wichtigste Fix */

  border-radius:50%;

  background: rgba(96,186,79,0.80);

  box-shadow:
    0 6px 20px rgba(37,211,102,0.35);

  overflow:hidden;
}

  /* CTA LOOK */
  background: rgba(96,186,79,0.80);

  color:#fff;

  box-shadow:
    0 6px 20px rgba(37,211,102,0.35);

  overflow:hidden;
}

/* ICON */
.wa-float img{
  width:30px;
  height:30px;
}

/* OPTIONAL TEXT (falls du später willst) */
.wa-float span{
  font-weight:600;
  font-size:14px;
}

/* SHIMMER wie CTA */
.wa-float::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );

  opacity:0.3;

  animation: shimmerMove 8s linear infinite;
}

/* PRESS */
.wa-float:active{
  transform:scale(0.95);
}



/* =========================
   VIMEO CUSTOM BUTTON
========================= */

.video-container{
 position:relative;
}

/* BUTTON */
.custom-play{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);

 width:72px;
 height:72px;

 border-radius:50%;

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

 background:rgba(255,255,255,0.18);
 backdrop-filter:blur(14px);

 border:1px solid rgba(255,255,255,0.3);

 box-shadow:
  0 10px 40px rgba(0,0,0,0.25),
  0 0 40px rgba(193,254,4,0.15);

 z-index:9999;

 cursor:pointer;

 opacity:0;
 transition:
  opacity 0.3s ease,
  transform 0.2s ease,
  box-shadow 0.3s ease;
}

/* SVG sauber zentrieren */
.custom-play svg{
 width:26px;
 height:26px;
}

/* Hover (Desktop) */
.custom-play:hover{
 transform:translate(-50%, -50%) scale(1.05);
 box-shadow:
  0 0 30px rgba(193,254,4,0.3);
}

/* Wenn sichtbar (dein JS steuert opacity) */
.video-container:hover .custom-play{
 opacity:1;
}

/* DARK MODE */
[data-theme="dark"] .custom-play{
 background:rgba(28,36,44,0.6);
 border:1px solid rgba(255,255,255,0.4);
}

/* =========================
   MOBILE HOME STORY MODE
========================= */

@media (max-width: 767px){
 body.home{
  height:100%;
  overflow:hidden;
 }

 body.home .home-story-shell{
  display:block;
  height:100svh;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
 }

 body.home .site-header,
 body.home .site-footer,
 body.home .message{
  scroll-snap-align:start;
  scroll-snap-stop:always;
 }

 body.home .site-header,
 body.home .site-footer{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  z-index:auto !important;
  width:100%;
  min-height:100svh;
  height:auto;
  padding:32px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
 }

 body.home .chat-wrapper{
  max-width:none;
  margin:0;
  padding:0;
  overflow:visible;
 }

 body.home .home-story-feed{
  display:block;
  margin-bottom:0;
 }

 body.home .message{
  position:relative;
  width:100%;
  min-height:100svh;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  display:block;
  overflow:hidden;
 }

 body.home .message::after{
  display:none;
 }

 body.home .message.message-intro{
  min-height:100dvh;
  padding:0;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  background:
   linear-gradient(
    180deg,
    rgba(7,10,14,0.12) 0%,
    rgba(7,10,14,0.24) 48%,
    rgba(7,10,14,0.72) 100%
   ),
   radial-gradient(circle at 20% 20%, rgba(193,254,4,0.22), transparent 30%),
   radial-gradient(circle at 80% 25%, rgba(0,150,255,0.22), transparent 28%),
   linear-gradient(135deg, #13283d 0%, #1d3247 40%, #0f1419 100%);
 }

 body.home .message.message-intro > .desc{
  position:relative;
  z-index:3;
  margin:0;
  width:min(340px, calc(100vw - 40px));
  max-width:calc(100vw - 40px);
  aspect-ratio:1 / 1;
  min-height:auto;
  padding:26px 22px;
  border-radius:24px;
  background:rgba(219,224,229,0.25);
  color:#fff;
  box-shadow:0 14px 40px rgba(15,23,42,0.16);
  backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow-wrap:anywhere;
 }

 body.home .message.message-intro > .desc center{
  display:block;
  width:100%;
  text-align:center;
  font-size:clamp(1.05rem, 4.2vw, 1.35rem);
  line-height:1.42;
 }

 body.home .message > .desc{
  position:absolute;
  left:12px;
  right:12px;
  bottom:84px;
  z-index:3;
  margin:0;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(215,221,227,0.05);
  color:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,0.16);
  backdrop-filter:blur(10px);
 }

 body.home[data-theme="dark"] .message > .desc,
 body.home.dark .message > .desc{
  background:rgba(28,36,44,0.86);
  color:#fff;
 }

 body.home[data-theme="dark"] .message.message-intro > .desc,
 body.home.dark .message.message-intro > .desc{
  background:rgba(28,36,44,0.82);
 }

 body.home .message > .desc p:last-child{
  margin-bottom:0;
 }

 body.home .message > .desc p:first-child{
  margin-top:0;
 }

 body.home .message > .cta{
  position:absolute;
  left:12px;
  right:12px;
  bottom:18px;
  z-index:4;
  margin:0;
  align-self:auto;
 }

 body.home .message > .media-slider,
 body.home .message > .video-container,
 body.home .message > .slide{
  min-height:0;
 }

 body.home .media-slider{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
 }

 body.home .slide{
  flex:0 0 100%;
  width:100%;
  height:100svh;
  min-height:100svh;
  border-radius:0;
  position:relative;
 }

 body.home .slide img,
 body.home .slide video,
 body.home .video-container{
  width:100%;
  height:100%;
 }

 body.home .video-container{
  position:relative;
  min-height:100svh;
  border-radius:0;
  overflow:hidden;
  background:rgba(12,16,21,0.92);
 }

 body.home .video-container.vimeo iframe{
  position:absolute;
  inset:0;
  top:0;
  left:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  transform:none;
  transform-origin:center;
 }

 body.home .slide::after,
 body.home .video-container::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
   180deg,
   rgba(7,10,14,0.08) 0%,
   rgba(7,10,14,0.08) 42%,
   rgba(7,10,14,0.62) 100%
  );
 }

 body.home .wa-float{
   display:flex;
  position:relative;
  right:auto;
  bottom:auto;
  left:auto;
  top:auto;
  order:-1;
  margin:0 auto 12px;
  width:58px;
  height:58px;
  border:3px solid #ffffff;
  box-shadow:
   0 10px 24px rgba(0,0,0,0.18),
   0 0 0 5px rgba(255,255,255,0.28);
 }

 body.home .site-footer{
  justify-content:center;
  align-content:center;
  justify-items:center;
  gap:14px;
  padding:
   32px
   20px
   calc(24px + env(safe-area-inset-bottom));
  text-align:center;
 }

 body.home .footer-inner{
  justify-content:center;
  align-items:center;
  gap:10px;
  width:auto;
  margin:0 auto;
  max-width:calc(100vw - 40px);
 }

 body.home .wa-float{
  margin-top:0;
  margin-bottom:0;
 }

 body.home .site-footer center,
 body.home .site-footer p{
  width:auto;
  max-width:calc(100vw - 40px);
  margin:0 auto;
  text-align:center;
 }
}

@media (max-width: 767px){
 .site-footer{
  padding-top:16px;
  text-align:center;
 }

 .wa-float{
  position:relative;
  right:auto;
  bottom:auto;
  left:auto;
  top:auto;
  order:-1;
  margin:0 auto 12px;
  width:58px;
  height:58px;
  border:3px solid #ffffff;
  box-shadow:
   0 18px 30px rgba(0,0,0,0.28),
   0 0 0 5px rgba(255,255,255,0.34);
 }

 .wa-float:active{
  transform:scale(0.95);
 }

 .footer-inner,
 .site-footer center,
 .site-footer p{
  width:auto;
  max-width:calc(100vw - 32px);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
 }
}


@media screen and (orientation: landscape) and (max-width: 900px) {
  body:not(.home) .chat-wrapper {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  body:not(.home) .message {
    width: 100%;
  }
}