/*
Theme Name: Travel Coming Soon
Theme URI: https://proviedinfo.com
Author: ProviedInfo
Author URI: https://proviedinfo.com
Description: A lightweight coming-soon theme with countdown timer and compass motif, built for travel brand launches. Upload as a WordPress theme and activate.
Version: 1.0
Requires at least: 5.5
Requires PHP: 7.2
Text Domain: travel-coming-soon
*/

:root{
  --sand:#F0E6D2;
  --navy:#1B2A3D;
  --navy-soft:#274158;
  --teal:#3C6E71;
  --amber:#D98A3D;
  --ink:#20242B;
  --line: rgba(27,42,61,0.16);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  background:var(--sand);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  width:100%;
  overflow-x:hidden;
}
.cs-wrap{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  text-align:center;
  overflow:hidden;
}
/* texture: faint grid, like a map */
.cs-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(27,42,61,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,42,61,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events:none;
}

.cs-eyebrow{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--navy);
  opacity:0.75;
  margin-bottom:28px;
  z-index:2;
}

/* compass signature */
.compass-stage{
  position:relative;
  width:min(46vw,300px);
  height:min(46vw,300px);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  z-index:2;
}
.compass-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--line);
}
.ring-1{ width:100%; height:100%; }
.ring-2{ width:80%; height:80%; }
.compass-tick{
  position:absolute;
  width:1px;
  height:10px;
  background:var(--navy);
  opacity:0.35;
  top:0;
  left:50%;
  transform-origin:50% 150px;
}
.compass-dir{
  position:absolute;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--navy);
  opacity:0.55;
}
.dir-n{ top:6%; left:50%; transform:translateX(-50%); }
.dir-e{ right:6%; top:50%; transform:translateY(-50%); }
.dir-s{ bottom:6%; left:50%; transform:translateX(-50%); }
.dir-w{ left:6%; top:50%; transform:translateY(-50%); }

.compass-core{
  width:14%;
  height:14%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--amber) 0%, var(--teal) 60%, var(--navy) 100%);
  box-shadow: 0 0 40px rgba(27,42,61,0.25);
  z-index:2;
}
.compass-needle{
  position:absolute;
  width:2px;
  height:38%;
  top:12%;
  left:50%;
  margin-left:-1px;
  transform-origin:50% 88%;
  background:linear-gradient(to top, var(--amber) 0%, var(--amber) 48%, var(--navy) 52%, var(--navy) 100%);
  animation: seek 9s ease-in-out infinite;
}
@keyframes seek{
  0%   { transform:rotate(-18deg); }
  30%  { transform:rotate(14deg); }
  50%  { transform:rotate(-6deg); }
  70%  { transform:rotate(4deg); }
  100% { transform:rotate(0deg); }
}

h1{
  font-family:'Prata',serif;
  font-weight:400;
  font-size:clamp(2rem,6vw,4.2rem);
  line-height:1.1;
  margin-top:40px;
  z-index:2;
  max-width:17ch;
}
h1 em{
  font-style:italic;
  color:var(--amber);
}

.cs-sub{
  margin-top:18px;
  max-width:46ch;
  font-size:clamp(14px,2.4vw,16px);
  line-height:1.65;
  color:var(--ink);
  opacity:0.72;
  z-index:2;
}

/* countdown */
.cs-countdown{
  display:flex;
  gap:clamp(14px,4vw,42px);
  margin-top:clamp(32px,6vw,52px);
  z-index:2;
  flex-wrap:wrap;
  justify-content:center;
}
.cs-cd-item{ display:flex; flex-direction:column; align-items:center; }
.cs-cd-num{
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:clamp(1.4rem,4vw,2.4rem);
  color:var(--navy);
  min-width:2ch;
}
.cs-cd-label{
  margin-top:6px;
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.5;
}
.cs-cd-sep{
  font-family:'Space Mono',monospace;
  font-size:clamp(1.2rem,3.4vw,2rem);
  color:var(--line);
  align-self:flex-start;
  margin-top:2px;
}

@media (prefers-reduced-motion: reduce){
  .compass-needle{ animation:none; transform:rotate(0deg); }
}

/* tablet */
@media (max-width:768px){
  .cs-wrap{ padding:8vh 8vw; }
  h1{ margin-top:32px; }
}

/* mobile */
@media (max-width:520px){
  .cs-countdown{ gap:12px; }
  .cs-cd-sep{ display:none; }
  .cs-eyebrow{ font-size:10px; letter-spacing:0.16em; }
  .compass-stage{ width:min(58vw,220px); height:min(58vw,220px); }
  .dir-n,.dir-s{ font-size:10px; }
}

/* very small phones */
@media (max-width:360px){
  .cs-cd-num{ font-size:1.2rem; }
  h1{ font-size:1.6rem; }
}