/*
Theme Name: MustSellABoat — Provisional Holding
Theme URI: https://mustsellaboat.com
Author: Forward Services
Author URI: https://forward.co.in
Description: A single-purpose corporate holding page theme for MustSellABoat.com. Every request renders one notice — a provisional-licence plaque for Must Global Trading No 1 Pte Ltd (UEN 202142103E) — mounted over a full-bleed harbour photograph, framed by two instrument-style rails and a restrained, continuous ambient animation. No posts, pages, menus, widgets or additional templates are used.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mustsellaboat-holding
*/

/* ---------------------------------------------------------
   TOKENS
--------------------------------------------------------- */
:root{
  --ink:            #04070a;
  --navy-deep:      #041423;
  --navy-mid:       #0a2438;
  --brand-cyan:     #00acdc;
  --cyan-glow:      #6fe4ff;
  --platinum:       #c7d2d9;
  --platinum-dim:   #93a3ac;
  --paper:          #f5f8fa;
  --hairline:       rgba(255,255,255,.16);
  --rail-bg:        rgba(3,10,17,.74);
  --plaque-bg:      rgba(3,13,21,.80);
  --plaque-border:  rgba(255,255,255,.13);
  --shadow-plaque:  0 30px 80px -20px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.05) inset;
  --font-display:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:       "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --ease:            cubic-bezier(.22,.7,.2,1);
}

/* ---------------------------------------------------------
   RESET / BASE
--------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
::selection{ background:var(--brand-cyan); color:var(--ink); }

/* ---------------------------------------------------------
   BACKDROP — photograph, scrim, vignette, grain
--------------------------------------------------------- */
.backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--navy-deep);
}
.backdrop__frame{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
}
.backdrop__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  animation:drift 42s var(--ease) infinite;
  will-change:transform;
}
@keyframes drift{
  0%   { transform:scale(1)     translate3d(0,0,0); }
  50%  { transform:scale(1.075) translate3d(-1.1%,-0.6%,0); }
  100% { transform:scale(1)     translate3d(0,0,0); }
}
.backdrop__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 52%, rgba(3,12,20,.72) 0%, rgba(3,12,20,.32) 46%, rgba(3,12,20,0) 72%),
    linear-gradient(180deg, rgba(2,8,13,.82) 0%, rgba(2,8,13,.18) 22%, rgba(2,8,13,.12) 68%, rgba(2,8,13,.86) 100%);
}
.backdrop__grain{
  position:absolute; inset:0;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   LAYOUT SHELL
--------------------------------------------------------- */
.shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------------------------------------------------------
   TOP RAIL — compliance / status bar
--------------------------------------------------------- */
.rail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px clamp(20px,4vw,48px);
  background:var(--rail-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.rail--bottom{
  border-bottom:none;
  border-top:1px solid var(--hairline);
  margin-top:auto;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  padding:18px clamp(20px,4vw,48px) 20px;
}
.rail__brand{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--platinum-dim);
  white-space:nowrap;
}
.rail__brand strong{
  color:var(--paper);
  font-weight:500;
}
.rail__status{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--platinum);
  white-space:nowrap;
}
.dot{
  position:relative;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--brand-cyan);
  box-shadow:0 0 0 0 rgba(0,172,220,.55);
  animation:pulse 2.6s ease-out infinite;
  flex:0 0 auto;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(0,172,220,.55); }
  70%  { box-shadow:0 0 0 8px rgba(0,172,220,0); }
  100% { box-shadow:0 0 0 0 rgba(0,172,220,0); }
}
.rail__clock{ color:var(--cyan-glow); font-weight:500; }

.disclaimer{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--platinum);
  max-width:640px;
  margin:0;
  line-height:1.55;
}
.copyright{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--platinum-dim);
  margin:0;
}

/* ---------------------------------------------------------
   HERO / PLAQUE
--------------------------------------------------------- */
.hero{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(32px,6vw,64px) 20px;
}
.plaque{
  position:relative;
  width:100%;
  max-width:600px;
  background:var(--plaque-bg);
  border:1px solid var(--plaque-border);
  border-radius:6px;
  box-shadow:var(--shadow-plaque);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  padding:clamp(38px,6vw,60px) clamp(28px,6vw,64px) clamp(34px,5vw,52px);
  text-align:center;
  animation:rise .9s var(--ease) both;
}
.plaque::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

.plaque__logo{
  width:clamp(200px,30vw,300px);
  margin:0 auto clamp(22px,3.6vw,30px);
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.35));
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-cyan);
  margin:0;
}

.beacon{
  position:relative;
  width:96px;
  height:2px;
  margin:18px auto 22px;
  background:var(--hairline);
  overflow:hidden;
  border-radius:2px;
}
.beacon::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:42%; height:100%;
  background:linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
  animation:sweep 3.4s linear infinite;
}
@keyframes sweep{
  0%   { transform:translateX(-140%); }
  100% { transform:translateX(340%); }
}

.lede{
  font-size:15px;
  line-height:1.65;
  color:var(--platinum);
  max-width:420px;
  margin:0 auto clamp(20px,3vw,26px);
}

.entity{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.01em;
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  line-height:1.18;
  color:var(--paper);
  margin:0 0 10px;
}

.uen{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--cyan-glow);
  background:rgba(0,172,220,.09);
  border:1px solid rgba(0,172,220,.28);
  border-radius:3px;
  padding:6px 14px;
  margin:0;
}
.uen span{ color:var(--platinum-dim); font-weight:400; }

/* ---------------------------------------------------------
   ACCESSIBILITY — reduced motion
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .backdrop__frame img,
  .dot,
  .beacon::after,
  .plaque{
    animation:none !important;
  }
}
:focus-visible{
  outline:2px solid var(--cyan-glow);
  outline-offset:3px;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:640px){
  .rail{ padding:14px 18px; }
  .rail__brand{ font-size:10px; letter-spacing:.12em; }
  .rail__status{ font-size:10px; letter-spacing:.1em; }
  .plaque{ padding:34px 22px 30px; border-radius:4px; }
  .lede{ font-size:14px; }
}
@media (max-width:420px){
  .rail{ flex-direction:column; align-items:flex-start; gap:8px; }
  .rail--bottom{ align-items:center; }
}
@media (max-height:700px){
  .hero{ padding:20px 20px; }
  .plaque{ padding:26px 20px 24px; }
  .plaque__logo{ margin-bottom:16px; }
  .beacon{ margin:12px auto 16px; }
  .lede{ margin-bottom:16px; }
}