/*
Theme Name: Yougi Coming Soon
Theme URI: https://yougi.ai
Author: Zul Aripin
Author URI: https://yougi.ai
Description: Cinematic coming-soon teaser for yougi.ai — full-screen video background with the yougi.ai brand lockup, auto-switching between landscape and portrait. Powered by AI. Driven by Heart.
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yougi-comingsoon
*/

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0e13}
body{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}

/* ===== full-bleed video background ===== */
.bg{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:0;background:#c9ced6}
.bg.port{display:none}
@media (orientation:portrait){
  .bg.land{display:none}
  .bg.port{display:block}
}

/* ===== overlay ===== */
.overlay{position:fixed;inset:0;z-index:2;pointer-events:none}
.ov{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;
  opacity:0;transition:opacity 1.1s ease}
body.ready .ov{opacity:1}

.logo,.logo svg{}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(300px,29vw,560px);height:auto;
  }

.coming{top:29%;font-size:clamp(13px,1.45vw,30px);font-weight:500;letter-spacing:.42em;color:#586472;
  text-shadow:-1px -1px 0 rgba(255,255,255,.5), 1.5px 1.5px 1px rgba(15,20,30,.5)}
.brands{top:71%;font-size:clamp(14px,1.5vw,32px);font-weight:500;color:#c7d0da;pointer-events:auto}
.sign{top:76.5%;font-size:clamp(12px,1.2vw,26px);font-weight:400;letter-spacing:.02em;color:#9aa6b4;
  text-shadow:-1px -1px 0 rgba(210,220,230,.30), 1.5px 1.5px 1px rgba(8,12,20,.6)}

.brands .sep{opacity:.45;margin:0 .55em;color:#9aa6b4}
.brand{color:inherit;text-decoration:none;position:relative;display:inline-block;transition:color .35s ease}
.brand::before{content:"";position:absolute;left:0;top:50%;width:.34em;height:.34em;border:2px solid currentColor;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.brand--raha:hover{color:#0BDA51}
.brand--pulau:hover{color:#4692E7}
.brand--on9:hover{color:#EE801E}
.brand:hover::before{animation:ripple 1.1s ease-out infinite}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.4);opacity:.75}100%{transform:translate(-50%,-50%) scale(6);opacity:0}}

.logo svg{width:100%;height:auto;display:block}

/* portrait tuning */
@media (orientation:portrait){
  .logo{width:72vw}
  

  .coming{top:31%;font-size:clamp(15px,4vw,40px)}
  .brands{top:70%;font-size:clamp(15px,3.6vw,38px)}
  .sign{top:74.5%;font-size:clamp(13px,3vw,32px)}
}

/* ===== footer ===== */
.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:clamp(14px,2.2vw,30px) clamp(16px,3vw,54px);font-size:clamp(11px,1.15vw,16px);color:#8794a2;font-weight:400;
  opacity:0;transition:opacity 1.2s ease .3s;pointer-events:none}
body.ready .site-footer{opacity:1}
.site-footer span{white-space:nowrap}
@media (max-width:560px){ .site-footer{padding:14px 15px;font-size:10.5px} }