/*
Theme Name: Dara Portfolio
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: A playful, colorful single-page portfolio theme for product designers. Sticker-peel project cards, a spinning "open to work" badge, and cursor-reactive floating shapes. Converted from a static HTML build.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dara-portfolio
*/

:root{
  --cream:#FAF8F2;
  --paper:#FFFFFF;
  --ink:#17171B;
  --ink-soft:#5B5A62;
  --tangerine:#FF6B35;
  --sunshine:#FFD23F;
  --mint:#06D6A0;
  --violet:#7C5CFF;
  --pink:#FF3EA5;
  --line: rgba(23,23,27,0.1);
  --shadow: 0 10px 30px rgba(23,23,27,0.08);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--sunshine); color:var(--ink); }

a{ color:inherit; text-decoration:none; }

.display{ font-family:'Fredoka', sans-serif; }
.mono{ font-family:'Space Mono', monospace; letter-spacing:0.02em; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- intro typing loader ---------- */
.intro-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--ink);
  color:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  transition:opacity .6s ease, visibility .6s ease;
}
.intro-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-inner{
  font-family:'Fredoka', sans-serif;
  font-size:clamp(24px, 5.6vw, 52px);
  font-weight:600;
  text-align:center;
  letter-spacing:0.01em;
}
.intro-cursor{
  display:inline-block;
  margin-left:4px;
  animation:intro-blink .85s step-start infinite;
}
@keyframes intro-blink{ 50%{ opacity:0; } }
body.intro-lock{ overflow:hidden; height:100%; }

/* ---------- background ambient blobs ---------- */
.blob-field{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(0px);
  opacity:0.55;
  will-change:transform;
}

/* ---------- header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,248,242,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:600;
}
.logo-mark{
  width:30px;height:30px;
  border-radius:50%;
  background:conic-gradient(from 90deg, var(--tangerine), var(--sunshine), var(--mint), var(--violet), var(--pink), var(--tangerine));
  animation:spin 6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:15px;
  font-weight:600;
}
.nav-links a{
  position:relative;
  padding:4px 0;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0%; height:3px;
  background:var(--tangerine);
  border-radius:3px;
  transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:var(--cream);
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  border:2px solid var(--ink);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease;
}
.btn:hover{
  transform:translateY(-3px) rotate(-1.5deg);
  background:var(--tangerine);
  border-color:var(--tangerine);
  color:var(--ink);
}
.nav-cta{ display:none; }
@media(min-width:720px){ .nav-cta{ display:inline-flex; } }

.burger{ display:flex; width:26px; height:20px; flex-direction:column; justify-content:space-between; cursor:pointer; }
.burger span{ height:3px; background:var(--ink); border-radius:3px; }
@media(min-width:720px){ .burger{ display:none; } }
.mobile-links{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:6px 0 20px;
}
.mobile-links.open{ display:flex; }
.mobile-links a{ padding:10px 0; font-weight:600; border-bottom:1px solid var(--line); }
@media(min-width:720px){ .nav-links{ display:flex; } .mobile-links{ display:none !important; } }
@media(max-width:719px){ .nav-links{ display:none; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  z-index:1;
  padding:96px 0 70px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:center;
}
@media(min-width:960px){
  .hero-grid{ grid-template-columns:1.15fr 0.85fr; gap:40px; }
}
.hero-copy{ min-width:0; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper);
  border:1.5px solid var(--line);
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  box-shadow:var(--shadow);
  margin-bottom:26px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(6,214,160,.18); }

.hero h1{
  font-size:clamp(42px, 8vw, 96px);
  line-height:0.98;
  font-weight:600;
  max-width:920px;
}
.hero h1 .accent{ color:var(--tangerine); }
.hero h1 .under{
  position:relative;
  white-space:nowrap;
}
.hero h1 .under svg{ position:absolute; left:0; bottom:-6px; width:100%; height:18px; }

.hero-sub{
  margin-top:26px;
  font-size:clamp(17px,2.1vw,21px);
  color:var(--ink-soft);
  max-width:560px;
  font-weight:500;
}

.hero-row{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:40px;
  flex-wrap:wrap;
}
.hero-row .btn.primary{ background:var(--tangerine); border-color:var(--tangerine); color:var(--ink); }
.hero-row .btn.primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.ghost-link{ font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.ghost-link .arrow{ transition:transform .25s ease; }
.ghost-link:hover .arrow{ transform:translateX(5px); }

.hero-stage{
  position:relative;
  height:220px;
  margin-top:56px;
}

/* ---------- hero photo column ---------- */
.hero-photo-wrap{
  position:relative;
  max-width:340px;
  margin:0 auto;
  justify-self:center;
}
@media(min-width:960px){ .hero-photo-wrap{ margin:0 0 0 auto; } }

.badge-spin{
  position:absolute;
  right:-14px; top:-34px;
  width:104px; height:104px;
  animation:spin 14s linear infinite;
  z-index:3;
}
@media(max-width:719px){ .badge-spin{ width:86px; height:86px; right:-6px; top:-24px; } }

.photo-blob{
  position:absolute;
  inset:-22px;
  border-radius:44px;
  background:linear-gradient(135deg, var(--sunshine), var(--pink));
  transform:rotate(-6deg);
  z-index:0;
}

.hero-photo{
  position:relative;
  z-index:1;
  border:3px solid var(--ink);
  border-radius:32px;
  overflow:hidden;
  box-shadow:10px 12px 0 var(--ink);
  transform:rotate(2deg);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  cursor:pointer;
  aspect-ratio:320 / 380;
}
.hero-photo:hover, .hero-photo:focus-visible{
  transform:rotate(0deg) translateY(-4px);
}
.hero-photo-illustration, .hero-photo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-photo-overlay{
  position:absolute;
  inset:0;
  background:rgba(23,23,27,0.82);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  opacity:0;
  transform:scale(0.96);
  transition:opacity .3s ease, transform .3s ease;
}
.hero-photo:hover .hero-photo-overlay,
.hero-photo:focus-visible .hero-photo-overlay{
  opacity:1;
  transform:scale(1);
}
.overlay-text{
  font-family:'Fredoka', sans-serif;
  font-size:clamp(20px, 3.4vw, 28px);
  font-weight:600;
  color:var(--cream);
}
.overlay-text span{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease;
}
.hero-photo:hover .overlay-text span,
.hero-photo:focus-visible .overlay-text span{ opacity:1; transform:translateY(0); }
.overlay-text span:nth-child(1){ transition-delay:.05s; }
.overlay-text span:nth-child(2){ transition-delay:.13s; }
.overlay-text span:nth-child(3){ transition-delay:.21s; }
.overlay-text span.wave{ transition-delay:.3s; }
.hero-photo:hover .overlay-text span.wave,
.hero-photo:focus-visible .overlay-text span.wave{ animation:wave-hand 1s ease .3s 2; }
@keyframes wave-hand{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(18deg); }
  75%{ transform:rotate(-12deg); }
}

.badge-core{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.badge-core-dot{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--violet);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
}

.photo-sticker{
  position:absolute;
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  left:-18px; bottom:34px;
  box-shadow:var(--shadow);
}
.photo-sticker--2{
  left:auto; right:-14px; bottom:-14px; top:auto;
  width:34px; height:34px; font-size:13px;
}

.float-shape{
  position:absolute;
  border-radius:50%;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  will-change:transform;
}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- marquee ---------- */
.marquee-outer{
  position:relative;
  z-index:1;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:var(--ink);
  overflow:hidden;
  padding:20px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  animation:marquee 26s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 28px;
  color:var(--cream);
  font-family:'Fredoka', sans-serif;
  font-size:22px;
  font-weight:500;
  white-space:nowrap;
}
.marquee-item .sep{ width:8px; height:8px; border-radius:50%; }

/* ---------- section heads ---------- */
.section{ position:relative; z-index:1; padding:110px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.kicker{
  font-size:13.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--tangerine);
  margin-bottom:14px;
  display:block;
}
.section-head h2{
  font-size:clamp(32px,4.4vw,54px);
  font-weight:600;
  line-height:1.05;
}
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:17px; font-weight:500; }

/* ---------- work grid ---------- */
.work-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}
@media(min-width:860px){ .work-grid{ grid-template-columns:1fr 1fr; } }

.card{
  position:relative;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--r-lg);
  padding:30px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  box-shadow:6px 6px 0 var(--ink);
}
.card:hover{
  transform:translate(-4px,-8px) rotate(-0.6deg);
  box-shadow:12px 16px 0 var(--ink);
}
.card-sticker{
  position:absolute;
  top:-26px; right:-26px;
  width:90px;height:90px;
  border-radius:50%;
  opacity:0.9;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index:0;
}
.card:hover .card-sticker{ transform:scale(1.25) rotate(18deg); }

.mock{
  position:relative;
  z-index:1;
  height:170px;
  border-radius:var(--r-md);
  border:2px solid var(--ink);
  margin-bottom:22px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.card:hover .mock{ transform:rotate(1deg) scale(1.015); }
.mock-bar{ height:9px; border-radius:6px; }
.mock-bar.w1{ width:38%; } .mock-bar.w2{ width:70%; } .mock-bar.w3{ width:52%; }
.mock-block{ flex:1; border-radius:10px; margin-top:6px; }
.mock-row{ display:flex; gap:8px; margin-top:2px; }
.mock-chip{ height:22px; border-radius:8px; flex:1; }

.mock.mock-photo{ padding:0; }
.mock-photo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:calc(var(--r-md) - 2px);
}

.card-top{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.card h3{ font-family:'Fredoka',sans-serif; font-size:25px; font-weight:600; }
.card .tag{
  font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; border:1.5px solid var(--ink);
}
.card p.desc{ position:relative; z-index:1; margin-top:12px; color:var(--ink-soft); font-size:15px; font-weight:500; line-height:1.55; }
.card .meta{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px;
}
.card .meta span{
  font-size:12.5px; padding:5px 10px; border-radius:8px; background:var(--cream); border:1px solid var(--line);
}
.card .stat{
  position:relative; z-index:1;
  margin-top:20px;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:'Fredoka',sans-serif;
}
.card .stat b{ font-size:28px; }
.card .stat span{ font-size:13px; color:var(--ink-soft); font-weight:600; }

/* ---------- process ---------- */
.process-line{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
@media(min-width:860px){ .process-line{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.step{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--r-md);
  padding:26px 22px;
  position:relative;
}
.step .num{
  font-family:'Fredoka',sans-serif;
  font-size:15px;
  font-weight:600;
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);
  background:var(--ink);
  margin-bottom:16px;
}
.step h4{ font-family:'Fredoka',sans-serif; font-size:19px; font-weight:600; margin-bottom:8px; }
.step p{ font-size:14.5px; color:var(--ink-soft); font-weight:500; line-height:1.5; }
.step-connector{
  display:none;
}
@media(min-width:860px){
  .step-connector{
    display:block;
    position:absolute;
    top:-18px; left:20px; right:-24px;
    height:2px;
    border-top:2px dashed var(--line);
    z-index:0;
  }
}

/* ---------- testimonials ---------- */
.quote-strip{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:860px){ .quote-strip{ grid-template-columns:repeat(3,1fr); } }
.quote-card{
  border-radius:var(--r-md);
  padding:28px 26px;
  border:2px solid var(--ink);
}
.quote-mark{ font-family:'Fredoka',sans-serif; font-size:44px; line-height:1; margin-bottom:6px; }
.quote-card p.q{ font-size:15.5px; font-weight:600; line-height:1.55; }
.quote-who{ margin-top:20px; display:flex; align-items:center; gap:12px; }
.quote-avatar{ width:38px;height:38px;border-radius:50%; border:2px solid var(--ink); }
.quote-who b{ display:block; font-size:14px; }
.quote-who span{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }

/* ---------- contact ---------- */
.contact-box{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  border-radius:var(--r-lg);
  padding:70px 40px;
  text-align:center;
  overflow:hidden;
}
.contact-box h2{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(34px,6vw,68px);
  font-weight:600;
  line-height:1.05;
}
.contact-box .wiggle{ display:inline-block; }
.contact-box .wiggle span{ display:inline-block; transition:transform .2s ease; }
.contact-box .wiggle:hover span{ animation:letterwiggle .6s ease; }
.contact-box .wiggle span:nth-child(odd):hover{ color:var(--sunshine); }
@keyframes letterwiggle{ 0%,100%{transform:translateY(0) rotate(0);} 30%{transform:translateY(-8px) rotate(-6deg);} 60%{transform:translateY(2px) rotate(4deg);} }

.contact-box p{ margin-top:20px; color:rgba(250,248,242,0.72); font-size:17px; font-weight:500; }
.contact-actions{
  margin-top:36px;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.contact-box .btn{ background:var(--sunshine); color:var(--ink); border-color:var(--sunshine); }
.contact-box .btn:hover{ background:var(--tangerine); border-color:var(--tangerine); transform:translateY(-3px) rotate(1.5deg); }
.socials{ margin-top:44px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.socials a{ font-weight:700; font-size:14px; border-bottom:2px solid transparent; padding-bottom:3px; transition:border-color .2s ease, color .2s ease; }
.socials a:hover{ border-color:var(--sunshine); color:var(--sunshine); }

footer{
  position:relative; z-index:1;
  padding:34px 0 50px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:13.5px; color:var(--ink-soft); font-weight:600;
}
.to-top{
  display:flex; align-items:center; gap:6px;
  font-weight:700; color:var(--ink);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; }