/*
Theme Name: Dice Media Under Progress
Theme URI: https://dicemedia.co.in/
Author: Dice Media
Author URI: https://dicemedia.co.in/
Description: A simple premium website-under-progress landing page for Dice Media.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dice-media-under-progress
*/

:root {
  --bg: #f3f1ec;
  --ink: #111111;
  --muted: #696762;
  --line: rgba(17, 17, 17, 0.12);
  --card: rgba(255, 255, 255, 0.52);
  --dice-blue: #159bd8;
  --dice-red: #ff1717;
  --dice-yellow: #fff45e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

body { overflow-x: hidden; }

.page-shell {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 22px;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 18%, rgba(21, 155, 216, 0.18), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(255, 23, 23, 0.10), transparent 32%),
    radial-gradient(circle at 50% 90%, rgba(255, 244, 94, 0.18), transparent 34%),
    linear-gradient(135deg, #faf8f2 0%, #ede9df 100%);
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid var(--line);
  border-radius: 30px;
  pointer-events: none;
  z-index: -1;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.11'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.ambient {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  filter: blur(44px);
  opacity: 0.22;
  pointer-events: none;
  animation: float 10s ease-in-out infinite alternate;
}

.ambient-one { top: 16%; left: 10%; background: var(--dice-blue); }
.ambient-two { right: 10%; bottom: 14%; background: var(--dice-yellow); animation-delay: -4s; }

.hero {
  width: min(860px, 100%);
  text-align: center;
  padding: clamp(34px, 7vw, 78px);
  border: 1px solid rgba(17, 17, 17, 0.10);
  border-radius: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.38));
  backdrop-filter: blur(22px);
  box-shadow: 0 30px 90px rgba(25, 24, 21, 0.12);
}

.logo-card {
  width: min(260px, 68vw);
  margin: 0 auto 34px;
  padding: 22px;
  border-radius: 28px;
  background: #050505;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.logo-card img { display: block; width: 100%; height: auto; }

.eyebrow {
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

h1 {
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(38px, 7vw, 74px);
  line-height: 0.96;
  letter-spacing: -0.07em;
  font-weight: 800;
}

.subtitle {
  margin: 24px auto 0;
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.65;
}

.status-card {
  width: min(540px, 100%);
  margin: 34px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.45);
}

.status-card > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dice-red);
  box-shadow: 0 0 0 7px rgba(255, 23, 23, 0.12);
}

.progress-track {
  position: relative;
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.09);
}

.progress-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 68%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dice-blue), var(--dice-yellow), var(--dice-red));
  animation: progressPulse 4.6s ease-in-out infinite alternate;
}

.contact-row {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-row a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contact-row a:hover { opacity: 0.62; }

.contact-row span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(28px, -22px, 0) scale(1.08); }
}

@keyframes progressPulse {
  from { width: 54%; }
  to { width: 76%; }
}

@media (max-width: 640px) {
  .page-shell { padding: 20px 14px; }
  .page-shell::before { inset: 10px; border-radius: 22px; }
  .hero { padding: 34px 20px; border-radius: 28px; }
  .logo-card { width: min(210px, 76vw); margin-bottom: 28px; }
  .status-card { border-radius: 26px; align-items: stretch; flex-direction: column; }
  .contact-row { gap: 12px; flex-direction: column; }
  .contact-row span { display: none; }
}

.logo-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 34px;
}

.dice-logo {
    width: 260px;
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}