/*
Theme Name: THE JIVES — Coming Soon Animated
Theme URI: https://thejives.jp/
Author: THE JIVES
Description: A temporary animated one-page Coming Soon theme for THE JIVES.
Version: 1.2.1
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: the-jives-coming-soon-animated
*/

@font-face{font-family:"Elsie";src:url("assets/fonts/elsie-900.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-garamond-600.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
:root{--black:#080706;--white:#ffffff;--muted:#8e857a;--accent:#9a7a62;--display:"Elsie",Georgia,serif;--text:"Cormorant Garamond",Garamond,Georgia,serif}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--white);background:var(--black);font-family:var(--text);font-weight:600;-webkit-font-smoothing:antialiased}::selection{color:var(--black);background:var(--accent)}
.coming-soon{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:100svh;overflow:hidden;padding:32px 3.4vw 27px;isolation:isolate}.admin-bar .coming-soon{min-height:calc(100svh - 32px)}
.grid{position:absolute;z-index:-3;inset:0;opacity:.28;background-image:linear-gradient(rgba(238,231,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(238,231,220,.05) 1px,transparent 1px);background-size:8.333vw 8.333vw;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 23%,#000 77%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 23%,#000 77%,transparent 100%)}
.glow{position:absolute;z-index:-2;top:50%;left:50%;width:min(71vw,1020px);aspect-ratio:1;border:1px solid rgba(238,231,220,.055);border-radius:50%;background:radial-gradient(circle,rgba(154,122,98,.095),rgba(61,51,44,.035) 44%,transparent 70%);filter:blur(4px);transform:translate(-50%,-50%)}.glow::before,.glow::after{position:absolute;border:1px solid rgba(238,231,220,.045);border-radius:inherit;content:""}.glow::before{inset:13%}.glow::after{inset:32%}
.topline,.bottomline{display:flex;align-items:center;justify-content:space-between;font-family:var(--text);font-size:12px;line-height:1;letter-spacing:.2em;text-transform:uppercase}.topline{padding-bottom:19px;border-bottom:1px solid rgba(238,231,220,.19)}.topline p,.bottomline p{margin:0}.topline p:first-child{color:var(--white);font-family:var(--display);font-size:15px;font-weight:900;letter-spacing:.08em}.topline p:last-child{color:var(--muted)}
.message{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:7vh 0}.message::before,.message::after{position:absolute;top:50%;width:clamp(44px,7vw,110px);height:1px;background:linear-gradient(90deg,transparent,rgba(154,122,98,.75));content:""}.message::before{left:0}.message::after{right:0;transform:scaleX(-1)}
.status{display:flex;align-items:center;gap:11px;margin:0 0 clamp(28px,4.5vh,60px) .6vw;color:#a79c8f;font-family:var(--text);font-size:12px;letter-spacing:.19em;text-transform:uppercase}.status span{width:6px;height:6px;border:1px solid var(--accent);border-radius:50%;background:transparent;box-shadow:0 0 0 3px rgba(154,122,98,.08);animation:blink 2.6s ease-in-out infinite}
.message h1{display:flex;flex-direction:column;margin:0;font-family:var(--display);font-size:clamp(78px,15.8vw,252px);font-weight:900;line-height:.72;letter-spacing:-.055em}.word{display:block;width:max-content;max-width:100%;will-change:transform,filter,opacity}.word>span{display:block;will-change:transform}.word-coming{animation:arrive-left 1.45s cubic-bezier(.16,.82,.2,1) both}.word-coming>span{animation:drift-right 8.5s 1.45s ease-in-out infinite alternate both}.word-soon{align-self:flex-end;padding-right:1.2vw;animation:arrive-right 1.6s .12s cubic-bezier(.16,.82,.2,1) both}.word-soon>span{animation:drift-left 9.5s 1.72s ease-in-out infinite alternate both}
.signal{position:absolute;z-index:1;top:50%;left:50%;display:flex;align-items:center;gap:4px;height:42px;opacity:.22;transform:translate(-50%,-50%)}.signal i{display:block;width:1px;height:12%;background:var(--accent);animation:wave 3.2s ease-in-out infinite alternate}.signal i:nth-child(3n){height:46%;animation-delay:-.8s}.signal i:nth-child(5n){height:100%;animation-delay:-1.5s}.signal i:nth-child(7n){height:70%;animation-delay:-.25s}
.bottomline{padding-top:19px;color:var(--muted);border-top:1px solid rgba(238,231,220,.19)}.bottomline p:nth-child(2){position:absolute;left:50%;transform:translateX(-50%)}.bottomline p:last-child{color:var(--white)}
@keyframes arrive-left{from{opacity:0;filter:blur(13px);transform:translate3d(-14vw,22px,0)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}}
@keyframes arrive-right{from{opacity:0;filter:blur(13px);transform:translate3d(14vw,-18px,0)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}}
@keyframes drift-right{from{transform:translateX(0)}to{transform:translateX(1.7vw)}}@keyframes drift-left{from{transform:translateX(0)}to{transform:translateX(-1.7vw)}}@keyframes wave{to{height:100%;opacity:.12}}@keyframes blink{50%{opacity:.32;transform:scale(.76)}}
@media(max-width:782px){.admin-bar .coming-soon{min-height:calc(100svh - 46px)}}
@media(max-width:720px){.coming-soon{padding:23px 20px 21px}.grid{background-size:25vw 25vw}.glow{width:150vw}.topline,.bottomline{font-size:10px;letter-spacing:.14em}.topline p:first-child{font-size:13px}.message{padding:5vh 0}.message::before,.message::after{display:none}.status{margin:0 0 43px 2px;font-size:10px}.message h1{font-size:21.7vw;line-height:.82;letter-spacing:-.06em}.word-soon{align-self:flex-start;padding-right:0}.signal{top:54%;gap:3px;height:30px}.bottomline p:nth-child(2){display:none}@keyframes drift-right{from{transform:translateX(0)}to{transform:translateX(2vw)}}@keyframes drift-left{from{transform:translateX(0)}to{transform:translateX(-2vw)}}}
@media(prefers-reduced-motion:reduce){.status span,.signal i,.word,.word>span{animation:none;filter:none;transform:none}}