/*
Theme Name: It Is Your Website
Theme URI: https://example.com
Author: It Is Your Website
Description: A single screen welcome landing page for a web developer and digital marketer. Animated colour mesh background, contact card, no scrolling on desktop.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
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: it-is-your-website
*/

:root{
    --ink:#0C0722;
    --paper:#FBF9FF;
    --cobalt:#2E4BFF;
    --magenta:#FF2E93;
    --amber:#FFC53D;
    --mint:#1FE3B6;
    --muted:rgba(251,249,255,.62);
    --line:rgba(251,249,255,.16);
    --pad:clamp(20px, 4vw, 64px);
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html,body{height:100%;}

  body{
    background:var(--ink);
    color:var(--paper);
    font-family:"Instrument Sans", system-ui, sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Ambient mesh ---------- */
  .stage{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:0;
  }

  /* slow colour sweep behind everything */
  .rays{
    position:absolute;
    width:160vmax;height:160vmax;
    left:50%;top:50%;
    margin:-80vmax 0 0 -80vmax;
    background:conic-gradient(from 0deg,
      transparent 0deg,
      rgba(46,75,255,.55) 26deg,
      transparent 62deg,
      rgba(255,46,147,.5) 122deg,
      transparent 168deg,
      rgba(255,197,61,.42) 232deg,
      transparent 276deg,
      rgba(31,227,182,.5) 330deg,
      transparent 360deg);
    filter:blur(58px);
    mix-blend-mode:screen;
    opacity:.55;
    will-change:transform;
    animation:spin 46s linear infinite;
  }
  @keyframes spin{to{transform:rotate(1turn);}}

  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.85;
    will-change:transform;
    mix-blend-mode:screen;
  }
  .b1{width:52vmax;height:52vmax;left:-14vmax;top:-16vmax;background:var(--cobalt);animation:drift1 22s ease-in-out infinite;}
  .b2{width:44vmax;height:44vmax;right:-12vmax;top:-10vmax;background:var(--magenta);animation:drift2 26s ease-in-out infinite;}
  .b3{width:38vmax;height:38vmax;right:6vmax;bottom:-18vmax;background:var(--amber);opacity:.6;animation:drift3 30s ease-in-out infinite;}
  .b4{width:34vmax;height:34vmax;left:12vmax;bottom:-16vmax;background:var(--mint);opacity:.55;animation:drift4 24s ease-in-out infinite;}

  @keyframes drift1{50%{transform:translate3d(14vmax,10vmax,0) scale(1.15);}}
  @keyframes drift2{50%{transform:translate3d(-12vmax,12vmax,0) scale(1.2);}}
  @keyframes drift3{50%{transform:translate3d(-10vmax,-12vmax,0) scale(1.1);}}
  @keyframes drift4{50%{transform:translate3d(12vmax,-10vmax,0) scale(1.18);}}

  .veil{
    position:absolute;inset:0;
    background:
      radial-gradient(120% 90% at 20% 20%, transparent 0%, rgba(12,7,34,.55) 60%, rgba(12,7,34,.92) 100%);
  }

  /* dot grid that only lights up around the pointer */
  .weave{
    position:absolute;inset:0;
    background-image:radial-gradient(rgba(251,249,255,.85) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.22;
    -webkit-mask-image:radial-gradient(340px 340px at var(--mx,50%) var(--my,45%), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
    mask-image:radial-gradient(340px 340px at var(--mx,50%) var(--my,45%), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
    transition:opacity .4s;
  }

  /* embers rising through the page */
  .sparks{position:absolute;inset:0;overflow:hidden;}
  .spark{
    position:absolute;
    bottom:-14px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 12px currentColor;
    opacity:0;
    will-change:transform;
    animation:float linear infinite;
  }
  @keyframes float{
    0%{transform:translate3d(0,0,0) scale(1);opacity:0;}
    12%{opacity:.9;}
    85%{opacity:.7;}
    100%{transform:translate3d(var(--drift,20px),-108vh,0) scale(.35);opacity:0;}
  }
  .grain{
    position:absolute;inset:-50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    opacity:.09;
    animation:grain 1.2s steps(4) infinite;
    pointer-events:none;
  }
  @keyframes grain{
    0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
    50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,3%)}
  }

  /* ---------- Layout ---------- */
  .shell{
    position:relative;
    z-index:1;
    height:100dvh;
    padding:var(--pad);
    display:grid;
    grid-template-rows:auto 1fr auto;
    gap:clamp(12px,2vh,28px);
  }

  .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .mark{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:800;
    letter-spacing:-.03em;
    font-size:clamp(15px,1.4vw,19px);
  }
  .mark span{color:var(--amber);}

  .status{
    display:inline-flex;align-items:center;gap:9px;
    font-family:"JetBrains Mono", monospace;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 14px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(8px);
  }
  .dot{
    width:7px;height:7px;border-radius:50%;background:var(--mint);
    box-shadow:0 0 0 0 rgba(31,227,182,.7);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    70%{box-shadow:0 0 0 9px rgba(31,227,182,0);}
    100%{box-shadow:0 0 0 0 rgba(31,227,182,0);}
  }

  .main{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:center;
    gap:clamp(24px,4vw,64px);
    min-height:0;
  }

  /* ---------- Headline ---------- */
  .eyebrow{
    font-family:"JetBrains Mono", monospace;
    font-size:clamp(10px,1vw,12px);
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--amber);
    margin-bottom:clamp(10px,1.6vh,18px);
  }
  h1{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:800;
    font-size:clamp(2.4rem, 6.2vw, 5.4rem);
    line-height:.93;
    letter-spacing:-.045em;
  }
  h1 .line{
    display:block;
    overflow:hidden;
    padding-bottom:.16em;   /* room for descenders inside the reveal mask */
    margin-bottom:-.14em;   /* pull the spacing back to where it was */
  }
  h1 .line:last-child{margin-bottom:0;}
  h1 .line > i{display:block;font-style:normal;}
  .sells{
    background:linear-gradient(96deg,var(--magenta),var(--amber) 55%,var(--mint));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  .rotator{
    margin-top:clamp(12px,2vh,22px);
    font-family:"JetBrains Mono", monospace;
    font-size:clamp(12px,1.15vw,14px);
    color:var(--muted);
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .rotator b{
    color:var(--paper);font-weight:500;
    border-bottom:2px solid var(--magenta);
    padding-bottom:2px;
    animation:swap .5s ease;
  }
  @keyframes swap{from{opacity:0;transform:translateY(8px);}}

  .blurb{
    margin-top:clamp(12px,2vh,22px);
    max-width:44ch;
    color:var(--muted);
    font-size:clamp(.95rem,1.15vw,1.1rem);
    line-height:1.55;
  }

  .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(16px,2.6vh,30px);}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    padding:14px 22px;border-radius:999px;
    font-weight:600;font-size:.95rem;text-decoration:none;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  }
  .btn:hover{transform:translateY(-3px);}
  .btn-primary{
    background:linear-gradient(96deg,var(--magenta),var(--cobalt));
    color:#fff;
    box-shadow:0 10px 30px -8px rgba(255,46,147,.7);
  }
  .btn-primary:hover{box-shadow:0 18px 40px -10px rgba(255,46,147,.85);}
  .btn-ghost{
    color:var(--paper);border:1px solid var(--line);
    background:rgba(255,255,255,.05);backdrop-filter:blur(8px);
  }
  .btn-ghost:hover{border-color:var(--paper);}

  /* ---------- Contact card ---------- */
  .card{
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(18px);
    padding:clamp(16px,2.2vw,26px);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  }
  .card h2{
    font-family:"JetBrains Mono", monospace;
    font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);margin-bottom:clamp(8px,1.4vh,14px);
  }
  .row{
    display:flex;align-items:center;gap:14px;
    padding:clamp(10px,1.5vh,14px) 4px;
    border-top:1px solid var(--line);
    text-decoration:none;color:var(--paper);
    transition:padding-left .3s cubic-bezier(.2,.8,.2,1);
  }
  .row:first-of-type{border-top:0;}
  .row:hover, .row:focus-visible{padding-left:12px;}
  .ico{
    flex:0 0 auto;width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.07);
    border:1px solid var(--line);
    transition:background .3s, border-color .3s;
  }
  .row:hover .ico{background:linear-gradient(140deg,var(--magenta),var(--cobalt));border-color:transparent;}
  .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .meta{min-width:0;}
  .meta small{
    display:block;font-family:"JetBrains Mono",monospace;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  }
  .meta span{
    display:block;font-size:clamp(.88rem,1.05vw,1rem);font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .arrow{margin-left:auto;color:var(--muted);opacity:0;transform:translateX(-6px);transition:.3s;}
  .row:hover .arrow{opacity:1;transform:translateX(0);}

  .foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    font-family:"JetBrains Mono",monospace;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:clamp(10px,1.6vh,16px);
  }
  .socials{display:flex;gap:18px;}
  .socials a{color:var(--muted);text-decoration:none;transition:color .25s;}
  .socials a:hover{color:var(--amber);}

  /* ---------- Entrance ---------- */
  .rise{
    opacity:0;transform:translateY(26px);
    animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes rise{to{opacity:1;transform:none;}}
  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
  .d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}.d7{animation-delay:.65s}

  h1 .line > i{transform:translateY(130%);animation:up .95s cubic-bezier(.16,1,.3,1) forwards;}
  h1 .line:nth-child(1) > i{animation-delay:.1s}
  h1 .line:nth-child(2) > i{animation-delay:.22s}
  @keyframes up{to{transform:none;}}

  :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px;}

  /* ---------- Responsive ---------- */
  @media (max-width:940px){
    body{overflow-y:auto;}
    .shell{height:auto;min-height:100dvh;}
    .main{grid-template-columns:1fr;gap:28px;align-content:center;}
    .blurb{display:none;}
  }
  @media (max-width:520px){
    .status{display:none;}
    .foot{flex-direction:column;align-items:flex-start;gap:10px;}
    .btn{flex:1;justify-content:center;}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
    .rise{opacity:1;transform:none;}
    h1 .line > i{transform:none;}
    .sparks, .weave{display:none;}
  }

  /* ---------- WordPress admin bar ---------- */
  body.admin-bar .shell{height:calc(100dvh - 32px);}
  @media screen and (max-width:782px){
    body.admin-bar .shell{height:auto;min-height:calc(100dvh - 46px);}
  }
  .screen-reader-text{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
  }